When you embed a video on a website, the code specifies the frame size, and it turns out that when you change the screen resolution, the video embedded on the website is displayed without taking into account the screen on different devices, as if you opened it on the video hosting itself.
Our task is to make sure that when you change the page size, the video frame automatically changes its size. When you open the site from different devices, the video will adjust to the screen size.
This guide has been tested with the YouTube service and the MediaCMS application.
By default, you get a link like this:
<iframe width="560" height="315" src="https://synay.dev/embed?m=d0xUIusUo" frameborder="0" allowfullscreen></iframe>
To make the video adjust automatically, we will bring this code to this form:
<div class="container">
<iframe src="https://synay.dev/embed?m=d0xUIusUo"
frameborder="0" allowfullscreen class="video"></iframe>
</div>
As you can see, we have removed the fixed sizes and added 2 css classes: container and video.
Now we need to add these classes to the style file of our site:
.container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
The container element is given a zero height and a percentage bottom padding. The percentage bottom padding is a percentage of the container width, so it has a fixed aspect ratio. But in order for the iframe to display inside the zero-height container, we need to make the container relative and the iframe absolute by placing it inside a div.
Don't forget to add the version to the path of your css file so that when you open it again, the current stylesheet is loaded, and not the cached version previously saved by the browser.
Example:
<link rel="stylesheet" href="https://domain.tld/css/style.min.css?_v=202408222001">
Now the video you embedded will automatically adapt to the screen size or browser window size.