You can add videos by embedding them in text blocks within your page-builder pages, or by using a code block.
The video needs to be first uploaded to a site such as YouTube or Vimeo. Make sure the video is not set as private.
Those sites will be able to generate "embed code" which you can copy. Then within the text block, click the Source button to view the HTML. Paste in the embed code here and it will display the video inside the text block.
To embed a YouTube video, follow these steps:
When you choose to embed videos, the videos appears inside "iframes" with a set width and height. However you may wish for the video to resize itself depending on the size of its container on the screen. For example, if the video is 640 pixels wide and your column in 500, it might appear outside of the column since it is too wide.
To do this you need to add some styles to the text block or your template (or code block). You also need to add a "video-responsive" class to your text block with the video inside (to do this click on the text-block's pallette icon):
The styles you need to have are below. To add this code to your text block, click its Source button and paste it at the very top. Otherwise you can add this to your HTML template's Header so it is available across every page using this template:
<style>
/* make video embeds responsive (use this class on text block with embed) */
.video-responsive{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.video-responsive iframe {
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
</style>
© Engaging Networks | Company registered in England and Wales | Company number: 03848111