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.

Embedding a YouTube video

To embed a YouTube video, follow these steps:

1. Find the video and click on the Share button
2. Click on Embed
3. Copy the code that it gives you:
   
4. In page-builder add a new text block and then click the Source button. Paste in the code there:
   
5. Save the block and the video will appear

1. Find the video and click on the Share button
2. Copy the Embed code it displays
   
3. In page-builder add a new text block and then click the Source button. Paste in the code there:
4. Save the block and the video will appear

Making videos responsive

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>