in

How to Make Embedded YouTube Videos Responsive in WordPress Using CSS

make embedded youtube videos responsive

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

The Last Of Us Part 2

The Last of Us Part 2 Is Not For The Faint-Hearted

Sell NFT Arts

How to Sell NFT Arts Without Paying Gas Fee on OpenSea