YOUTUBE: RESPONSIVE CUSTOM DISPLAY MODS VALID HTML5

YouTube Custom Display Mods (Modification) - How to make a custom frame for You Tube embedded mode? It has to be more cool if using: YOUTUBE MODS VERSION CLEAN LOOKS and add the additional YOUTUBE SUBSCRIBES WIDGET. You can see live preview on below link.

YOUTUBE DEFAULT VERSION VALID HTML5

HTML - Default YouTube Embeded VALID HTML5

<iframe width="100%" height="360" src="//www.youtube.com/embed/3uFaZqLCzMA?rel=0" frameborder="0" allowfullscreen></iframe>

YOUTUBE VALID HTML5 MUST USE 'EMBED CODE'

We can't use iFrame if want to make our page valid on HTML5 checker. This is the valid HTML5 code:

<embed src="http://www.youtube.com/v/XXX" width="560" height="315"/>

YOUTUBE MODS VERSION CLEAN & FLAT LOOKS

CSS - Before </style> :

.youtubeBorder{background:none repeat scroll 0 0 #fff;border:1px solid #e0e0e0;border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:10px 0 20px;padding:4px;}
.youtubeBorder p.post-video{margin:0!important;}
.youtube{background-color:#000;max-width:100%;overflow:hidden;position:relative;cursor:hand;cursor:pointer;height:360px;width:100%;}
.youtube .thumb{bottom:0;display:block;left:0;margin:auto;max-width:100%;position:absolute;right:0;top:0;width:100%;height:auto;opacity:.8;}
.youtube .play{opacity:.9;height:77px;left:50%;margin-left:-38px;margin-top:-38px;position:absolute;top:50%;width:77px;background:url(http://bit.ly/playtubes) no-repeat}
.play:hover {opacity:1;}

ALTERNATIVE YOUTUBE PLAY ICONS

http://bit.ly/playtubes

http://bit.ly/playtubez

jQUERY - Before </body> :

<script>
$(document).ready(function(){
$("#play").click(function(){
$("#remove").hide();
$("#add").show();
});
});
</script>

HTML

<div class='youtube' data-id='3uFaZqLCzMA'><iframe id="add" style="display:none" width="100%" height="330" src="//www.youtube.com/embed/3uFaZqLCzMA?rel=0" frameborder="0" allowfullscreen></iframe><div id="remove"><a href="https://www.youtube.com/watch?v=3uFaZqLCzMA"><img class='thumb' src="http://i.ytimg.com/vi/3uFaZqLCzMA/hqdefault.jpg"/></a><div class='play' id="play"></div></div></div>

NOTES! Change all 3uFaZqLCzMA with YouTube's videos ID, CTRL+F, then find it more easier.

BONUS: YOUTUBE SUBSCRIBES WIDGET

HTML - Put this iframe's script right after the last code above script!

<iframe src="http://www.youtube.com/subscribe_widget?p=YOUTUBE_USERNAME" style="overflow: hidden; height: 105px; width: 100%; border: 0;" scrolling="no" frameborder="0"></iframe>

CHANGEABLE:
Change YOUTUBE_USERNAME to your YouTube's username.


READ TOO: HOW TO MAKE DEFAULT EMBEDDED YOUTUBE BECOME RESPONSIVE