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.
Was this article helpful?
Cancel
Thank you!