The Latest Ways to Install Responsive Youtube Videos on Blog

The Latest Way to Install Responsive Youtube Videos on Blog - Youtube is the most popular video sharing site at the moment where you can upload videos, watch videos, or you can also earn money from YouTube by registering an AdSense account via YouTube.

There are many advantages offered by this youtube site, one of which is a video embed feature that you can add and can watch directly on the blog. But by adding the video will reduce the SEO value of a blog because of the iframe element and the appearance is not responsive if the screen size is reduced.

So here Wiana gives a trick so that youtube videos become responsive and will not reduce the SEO value of your blog. Here's how to apply it:

1. Open Blogger> Template> Edit HTML> Add the code below before ]]></b:skin> or </style>

/* Youtube Responsive */
.videoyoutube{text-align:center;margin:auto;width:100%;}
.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}
.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

2. Add the code below before </body>

<script type='text/javascript'>
//<![CDATA[
// Youtube Responsive
setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5e3);
//]]>
</script>

3. Save the template.

4. Next to add a video to the post, use the code below

<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="SIMPAN-LINK-EMBED-VIDEO-DI-SINI">
</div>
</div>
</div>

Examples of embed video links taken:
Copy the embed link like the screenshot above, then save it in the HTML code above like this:

lt;div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="//www.youtube.com/embed/31k_DB8KVQM">
</div>
</div>
</div>

5. Finally save / publish posts.

Update: CSS Only

I got an idea from a duniavern friend's comment to outsmart embed youtube videos to be responsive only with CSS. For those who want to replace it just by adding CSS, you can install the code below:

/* CSS Only */
.post-body iframe{width:100%!important;}
@media screen and (max-width:960px){
.post-body iframe{max-height:90%}}
@media screen and (max-width:768px){
.post-body iframe{max-height:75%}}
@media screen and (max-width:600px){
.post-body iframe{max-height:60%}}
@media screen and (max-width:480px){
.post-body iframe{height:auto!important;max-height:auto!important}}

Rearrange the CSS max-height in the media query if it is not appropriate.
Now the youtube video embeded on the post is responsive which means the video can adjust to the size on any screen. So few tricks about the Latest Ways to Install Responsive Youtube Videos on the Blog. Hopefully useful for all blogger friends. thanks.