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
Thank you!