Skip to content

Instantly share code, notes, and snippets.

@dnikonov
Created March 24, 2014 11:25
Show Gist options
  • Save dnikonov/9738502 to your computer and use it in GitHub Desktop.
Save dnikonov/9738502 to your computer and use it in GitHub Desktop.
CSS + JS: youtube
/* CSS */
a[href*=youtube] {display: block; position: relative; width: 260px; height: 195px;}
a[href*=youtube] img {vertical-align: top; width: 260px; height: 195px;}
a[href*=youtube] span {display: block; position: absolute; left: 0; top: 0; background: url('images/play.png') no-repeat center center; width: 260px; height: 195px;}
a[href*=youtube]:hover span {opacity: 0.75;}
/* JS */
// ссылки на видео youtube
$('a[href*=youtube]').each(function(){
var video_id = $(this).attr('href').split('v=')[1];
var ampos = video_id.indexOf('&');
if (ampos != -1) video_id = video_id.substring(0, ampos);
// вставляем фоновую картинку + PLAY
$(this).append($('<img src="http://img.youtube.com/vi/' + video_id + '/0.jpg" />'));
$(this).append($('<span></span>'));
// convert youtube href to embed for iframe
var h = this.href.replace(new RegExp("watch\\?v=", "i"), 'embed/');
// bind fancybox to each anchor
$(this).fancybox({
type: 'iframe',
// add trailing parameters to href (wmode) AND autoplay
href: h + "?wmode=opaque&amp;autoplay=1"
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment