Embedding videos

To embed and make embedded videos responsive. Please follow the steps below:

1- Place an embed element on your page using the editor: https://snipboard.io/qDrNjv.jpg and use the following embed code.

<div class="iframe-container"> 
Insert the embed code here.
</div>

For example this is the how it looks with Youtube embed code.

<div class="iframe-container"> 
<iframe width="942" height="530" src="https://www.youtube.com/embed/a3ICNMQW7Ok" title="Wildlife Windows 7 Sample Video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

2- Please add the following CSS code in Code Injection > Body. The results will show on live page. You may test it on your mobile and laptops.

<style> 
.iframe-container{ 
position: relative; 
width: 100%; 
padding-bottom: 56.25%; 
height: 0; 
} 
</style> 
<style> 
.iframe-container iframe{ 
position: absolute; 
top:0; 
left: 0; 
width: 100%; 
height: 100%; 
} 
</style>

After adding the CSS code, check your live page for results.

Feel free to ask questions using the Crisp icon showing on the bottom right side.

Updated on: 28/08/2022