When Youtube videos are embedded into WordPress with the iframe tag, the videos will already come with a default width and height, which displays properly on the web, and when viewed on smaller screens, the edges are cut off.
To fix this you will need to format the embed code and also add some styling to your website to make your videos responsive on smaller screens.
To get started, copy the code below and place it where you want your video to appear, and don’t forget to replace the YouTube video link with yours.
<div class="video-container">
<iframe src="https://www.youtube.com/embed/M0yh-jnNPHI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
After adding the video link to the page, also add the styles below to your custom CSS area, and this should make the videos responsive on all devices.
.video-container {
overflow: hidden;
position: relative;
width:100%;
}
.video-container::after {
padding-top: 56.25%;
display: block;
content: '';
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
The 56.25% in the (.video-container) styling is needed as padding when the aspect ratio of your video is 16:9.
If your video is 4:3 for example, set it to 75%.
----------
If you liked this article, please subscribe to our YouTube Channel for tech news, reviews and video tutorials. You can also find us on Twitter, Instagram and Facebook.
