How to add YouTube video into the Splash Portal

You can embed into the Splash Portal a video coming from an external source, such as YouTube. This can be done by using an HTML content block.

Please, consider that any external content and media can be shown into the Splash Portal in the pre-authentication mode only if the domain hosting the media is opened in the access network Walled Gardens.
The pre-authentication mode is the Splash Portal prompt to the user before the sign-in.

In case of embedding a YouTube video, for example, you should add the domain "youtube.com" to Walled Gardens.

1) To embed a video from YouTube you can simply get the code from the YouTube web site, as shown below:

Image: /hc/en-us/article_attachments/200107478/youtube.png

Image: /hc/en-us/article_attachments/200107478/youtube.png

2) Create an HTML content type in the Splash Portal content block gallery.

Image: /hc/en-us/article_attachments/200150647/ScreenHunter_103_Oct._16_18.08.jpg

Image: /hc/en-us/article_attachments/200150647/ScreenHunter_103_Oct._16_18.08.jpg

3) Enable the HTML view in the text editor

Image: /hc/en-us/article_attachments/200104566/html.png

4) Paste the code you copied from YouTube

Image: /hc/en-us/article_attachments/200107948/ScreenHunter_105_Oct._16_18.10.jpg

Make the video tailored for mobile devices

To adapt the video also to small screen, such as smartphones, you can use some CSS style. Below an example of the code you can paste into the HTML content type (change the video ID with your)

	

<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>