How to make YouTube embedded in responsive and valid on HTML5's check - When adding YouTube to our site, it will give a Non-Responsive Youtube and Not-Valid HTML5. So, here we must edit the default code become Valid HTML5. So indeed it is much better than using the original code that given by YouTube.
CSS:
.videoyoutube{
text-align:center;
background:linear-gradient(to bottom, #fefefe 0%, #d1d1d1 100%);
border:1px solid #A8A8A8;
border-radius:5px;
margin:20px auto;
width:80%;
box-shadow: 1px 30px 30px -26px #818181;
}
.video-responsive {
position:relative;
padding-bottom: 56.25%;
height:0;
overflow:hidden;
margin:8px;
}
.video-responsive iframe {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border:0;
}
HTML:
<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube-loader" data-src="//www.youtube.com/embed/XXX"></div>
</div>
</div>
EDIT TEMPLATE:
Input this above </body> :<script type='text/javascript'>
//<![CDATA[
setTimeout(function(){
$('.video-youtube').each(function(){
$(this).replaceWith('<iframe class="video-youtube-loader" src="'+$(this).data('src')+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5000);
//]]>
</script>
jQUERY
At least needed jQuery version 1.10.2 or equivalent:<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
Read too: UPDATED! YOUTUBE WITH LAZY LOAD FEATURE
ADDITIONAL INFORMATION ABOUT YOUTUBE VALID HTML5 & SEO FRIENDLY:
NOT VALID HTML5
<iframe width="560" height="315" src="http://www.youtube.com/embed/XXX?rel=0" frameborder="0" allowfullscreen></iframe>
VALID HTML5 BUT ERROR STILL DETECTED
<iframe width="560" height="315" src="http://www.youtube.com/embed/XXX"></iframe>
VALID HTML5 BUT USING 'OLD EMBED CODE'
<embed src="http://www.youtube.com/v/XXX" width="560" height="315"/>
Read too: UPDATED! YOUTUBE WITH LAZY LOAD FEATURE