CSS + JS: youtube

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"
	});
});