The Latest Ways To Install Responsive Youtube Videos On Blog
10 Sep 2018
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>
2. Add the code below before </body>
3. Save the template.
4. Next to add a video to the post, use the code below
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>Latest Ways to Install Responsive Youtube Videos on the Blog. Hopefully useful for all blogger friends. thanks.