V předchozím dílu jsme si ukázali, jak získat náhledový obrázek YouTube videa. Dnes tuto znalost konečně zužitkujeme. V dalším ze série krátkých článků si ukážeme, jak snadno a jednoduše přizpůsobit inline rámy responzivnímu designu. 

Teoreticky půjde následující postup: iframe obalíme elementem, který dostane na pozadí náhledový obrázek. V něm se podle rozlišení zobrazí buď iframe nebo externím odkaz. Background-image containeru se taktéž zapne až při určitém rozlišení a/nebo zařízení.

Celá konstrukce bude mít ještě pár prvků navíc, aby nám objekt hezky držel rozměry, plus abychom měli kam dát ikonku symbolizující play. Držení poměru přes pomocné obrázky je jenom jedno z možných řešení, lze použít i jiné, akorát já si tento způsob oblíbil. Pro telefon bude box zobrazen v poměru 3:2, pro tablet potom 3:1, aby byl obrázek širší a nezabíral zbytečně moc místa.

Zdroj

Níže máme příklad videa tak, jak bude vložené ve stránce.


		
			
			
			_
			_
		
	
	</span>
';

Regulární výraz

Před náhradou ještě proženeme text článku funkcí strpos, abychom na to zbytečně nepouštěli preg_replace a tím nezpomalovali renderování stránky.

if(strpos($article_text,'<iframe') !== false){
	$article_text = preg_replace('/<iframe([^>]+)><\/iframe>/', $youtube_replace_pattern, $article_text);
}

CSS

Dále musíme celý objekt řádně nastylovat. Container bude mít na pozadí právě získaný obrázek, pro rozlišení nad 641 pixelů vypnutý. Element odkazu pak piktogram pro přehrání, resizovací obrázek bude nastavený na 100% šířky. Nesmíme zapomenout ani na max-width u iframu.

Rozlišením pod 640 pixelů cílím telefony a úzká okna na desktopu. Pro tablety musíme styly trošičku ohnout, protože ty se rozlišením cílí docela špatně... Tablet určíme podle CSS třídy na <body>, takže jenom zopakujeme blok stylů pro telefon. Na dotykovém zařízení totiž chceme chování stejné.

Těch možností detekce a zápisu stylů je opět víc, já si zvykl na tento způsob. A jak dostat třídu "tablet" na <body> si ukážeme v jednom z dalších článků.

.youtube-container {display:block;position:relative;background:transparent none no-repeat 50% 50%;
	background-size:cover;-webkit-background-size:cover;
}
.youtube-container > a {display:none;background:url(youtube-play.png) no-repeat 50% 50%;
	background-size:15% auto;-webkit-background-size:15% auto;
}
.youtube-container > a > img.youtube-resizer {display:none;margin:0;width:100%;max-width:100%;height:auto;position:relative;z-index:100;}
.youtube-container > iframe {display:block;max-width:100%;}

@media all and (min-width: 641px){
	body:not(.tablet) .youtube-container {background-image:none !important;}
}

@media all and (max-width: 640px){
	.youtube-container {background-color:rgba(0,0,0,0.5);}
	.youtube-container > a {display:block;}
	.youtube-container > a > img.youtube-resizer {display:block;}
	.youtube-container > a > img.youtube-resizer.tablet-resizer {display:none;}
	.youtube-container > iframe {display:none;}
}

.tablet .youtube-container {background-color:rgba(0,0,0,0.5);}
.tablet .youtube-container > a {display:block;}
.tablet .youtube-container > a > img.youtube-resizer {display:none;}
.tablet .youtube-container > a > img.youtube-resizer.tablet-resizer {display:block;}
.tablet .youtube-container > iframe {display:none;}

JavaScript

Na závěr potřebujeme ještě trochu JavaScriptu. Ten právě načte náhledový obrázek a také podle vzoru nastaví externí odkaz na video.

$.fn.youTubeImage = function(){
	this.each(function(){
		var src = $(this).find('iframe').attr('src');
		var arr = src.split('/');
		
		if(arr.length){
			var id = arr[arr.length-1].replace(/^(.*)\?(.*)$/, '$1');
			var image = 'http://img.youtube.com/vi/' + id + '/0.jpg';
			$(this).css({backgroundImage:'url(' + image + ')'});
		}
		
		var href = 'https://www.youtube.com/watch?v=' + id;
		$(this).find('a').attr({href:href,target:'_blank'});
	});
};

$('.youtube-container').youTubeImage();

Ukázka v praxi

Pro potřeby článku jsem si nachystal malou ukázku, kde se můžete podívat, jak se video změní v odkaz a naopak. Stačí hýbat s šířkou prohlížeče.

YouTube responsive iframe ukázka
YouTube responsive iframe ke stažení