Embedding Youtube Videos

With the addition of our media library, you can upload your own videos within modular pages, meaning that you can rely less on third party video services such as YouTube. Should you need to however, it’s still possible to embed YouTube videos. This is done in the HTML module on a modular page.

1. Add an HTML module on a modular page. If you’re not sure how to do so, please read the guide on modular pages.

2. Copy all of the following HTML code in to your HTML module:

<!DOCTYPE HTML>
<html>
<head>
<title>Document Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style>body { margin: 0; }</style><style>
.tabweb-video-container
{ position: relative; padding-bottom: 56.25%; padding-top: 35px; height: 0; overflow: hidden; }
.tabweb-video-container iframe
{ position: absolute; top:0; left: 0; width: 100%; height: 100%; }
</style></head>
<body><div class="tabweb-video-container"><iframe src="https://www.youtube.com/embed/g1mUNUDAfHY" frameborder="0" allowfullscreen></iframe></div></body>
</html>

3. Find the YouTube video ID for the video you wish to embed, and replace the example ID g1mUNUDAfHY in the HTML code that you have copied in to the HTML module. This YouTube ID can be found in the URL for the video, after the = symbol. For example:

 

4. The YouTube video ID has been highlighted in the address bar above. Click on Save & Close or Save & Publish, to publish your content.

The YouTube video will now be embedded on your page, as per below: