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.

```html
<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

Was this article helpful?

Share your feedback

Cancel

Thank you!