How To Make Youtube Videos Responsive In Your Blog Posts | Blogger Templates + Wordpress Themes|Kotryna Bass Design

Web Design For Bloggers + Creatives

FREE INSTALLATION SERVICES INCLUDED →

How To Make Youtube Videos Responsive In Your Blog Posts

responsive-youtube-videos-blog-posts

Are you a video content creator embedding your videos onto your blog? Make sure you’re doing the right thing & sharing a responsive content only! Let me show you how you can make your youtube videos mobile friendly.

1. Find the video on Youtube that you’d like to share, click SHARE->EMBED & copy the code.

2. Paste the embedded code into your post or page, it will turn out to be something like this:

<iframe src="https://www.youtube.com/embed/randomnumbers" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

3. Wrap this code into a div, into something like this:

<div class='resvideo'><iframe src="https://www.youtube.com/embed/randomnumbers" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>

4. Now we will have to use this div class to make video responsive. If you’re on Blogger go to Template-> Edit HTML and add it above ]]></b:skin>. If you’re on WordPress, insert it under your stylesheet.css (usually placed under EDITOR area)

.resvideo {
position: relative;
max-width: 100%;
margin: 20px auto;
padding-bottom: 56%;
padding-top: 30px;
overflow: hidden;
height: auto;
}
.resvideo iframe, .videoresp object, .videoresp embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

That’s all you need to do really! Let me know if you’ve tried this!

3 Comments

  1. Prashant D Ponde 22/09/2018

    Hi,

    Thanks for the solution.

    This worked for desktop perfectly, however it does not do auto-resizing for cellphone/mobile devices.

    There is only one video at the middle of this page. Can you please advise?

  2. Evgeny 24/10/2018

    Thx

  3. Sirli 16/11/2018

    Thank you, this works fine!

Leave a reply

Your email address will not be published.