MyBacklink86 - YouTube is a video sharing website The most popular today is where my friend can upload videos, watch videos, or it could be to generate revenue from youtube adsense account by registering via youtube.
Many advantages offered by this youtube sites, one of which is the video embed feature that can mate to add and can be viewed directly on the blog. However, by adding the video will reduce the value of SEO blog because the iframe element and the zoom was not responsive if the screen size is reduced.
In this article My Backlink will give a youtube video tricks to become responsive and will not reduce the value of SEO blog. Here's how its application:
1. Go to Blogger >> Template >> Edit HTML >> Add the code below before the ]]></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 following code before the </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 Template
4. Next to the add video in the sidebar or post blog, use the code below:
<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="//www.youtube.com/embed/gWG-_WQz3qM">
</div>
</div>
</div>
Examples of link embed youtube video :
Copy the embed youtube link like the screenshot above, and then store them in your HTML code above.
For responsive youtube video codes you can apply in the sidebar of a blog or in a blog post, all according to your wishes which you want to post your blog responsive youtube video.
