How to add YouTube video onto the Welcome Portal

Follow

Volare offers the option to embed a video on the Welcome Portal, hosted on an external source such as YouTube. This can be done by using an HTML content block.

Any external media content can be displayed on the Welcome Portal in the pre-authentication mode, provided if the domain hosting the media is opened in the access network Walled Garden. For more information about the walled garden, see: Walled Garden for the Social Login.

When embedding a YouTube video, you should add the main domain "youtube.com" and include all related sub-domains into Walled Garden. See the guide below on how to embed a sample YouTube video.

1) To embed a video from YouTube, simply get the code from the YouTube website, as shown below:

2) Create an HTML content type in the Welcome Portal content block gallery. The process to create a content block is described in Define content blocks for your welcome portal.

3) Enable the HTML view in the text editor

4) Paste the code you copied from YouTube

Make a responsive video for mobile devices

To adapt the video for small device screens, such as smartphones, you can use CSS styling. Below is an example of the code you can paste into the HTML content type (change the video ID with yours)

<style type="text/css">
.auto-resizable-iframe {
 max-width: 420px;
 margin: 0px auto;
}

.auto-resizable-iframe > div {
 position: relative;
 padding-bottom: 75%;
 height: 0px;
}

.auto-resizable-iframe iframe {
 position: absolute;
 top: 0px;
 left: 0px;
 width: 100%;
 height: 100%;
}

</style>

<div class="auto-resizable-iframe">
 <div>
   <iframe id="ytplayer" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/UN4jRoFKwW0?rel=0&amp;fs=1 controls=0&amp;modestbranding=1&amp;rel=0&amp;showinfo=0&amp;autohide=1&amp;theme=dark" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
 </div>
</div>

Have more questions? Submit a request

Comments