How to embed the VancastVideo player in your own page

Modified on Fri, 16 Dec 2022 at 03:52 PM

Summary: Even though you don't necesarily need to do so, because Vancast Video provides you with a full hosted page per event, you might still want to embed the player in your own page.


Important!

Only these types of access links are suitable for embedding the player in your page:

  • Open Access
  • Single Sign On Access

Follow these steps

1. Create a link

To embed the player you must create a link of the types mentioned above.

  1. Hover over the side menu of the Event Management Page and click on Access Links 
  2. Clickto add a new Access Link
  3. In the modal window that just opened, give it a useful Description 
  4. Choose the Open Access type
  5. Click overto enable the link
  6. Click Create
  7. Get the URLs; Click on the Link's box to unfold its properties and on the URL tab, use the correspondingbutton to copy the Webcast Player embed code to the clipboard.

2. Paste the iframe tag within your HTML code.

<iframe src="https://yoursubdomain.vancastvideo.com/event/XHASHXXX/8888/embed?lang=9999" frameborder="0" allowfullscreen=""></iframe>

3. Add an Id or class selector to the iframe tag so that you can write a CSS for that Id or class (in our example id="video-streaming"

<iframe id="video-streaming" src="https://yoursubdomain.vancastvideo.com/event/XHASHXXX/8888/embed?lang=9999" frameborder="0" allowfullscreen=""></iframe>

4. Add the styles for the "video-streaming" id .selector

If you set up a width for the iframe on your page, you must consider the 16:9 proportion of the video player. 

In our example, we've set up a width of 60% of the viewport width. Therefore, the height must be 60 x 9 / 16 of the viewport width as well. Thus, 33.75% of the viewport width.

#video-streaming {  
    width: 60vw;
    height: 33.75vw;
    margin: 0 auto 0px;
    padding: 0 0 40px;
    display: block;
}

The code above is just an example of the kind of code you need for embedding a video player on your page 

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article