Fluid Iframe (YouTube....)

Programovacie jazyky, rady, poradňa...
Michaelo
Hardcore addict
Hardcore addict
Používateľov profilový obrázok
Príspevky: 6177
Registrovaný: 16 júl 2008, 20:29
Bydlisko: Pri PC
Kontaktovať používateľa:

Fluid Iframe (YouTube....)

Príspevok od používateľa Michaelo »

Zdravím,

hľadal som nejakú normálnu funkciu na fluidné videá, no nenašiel som nič normálne, tak som si jednu napísal. Problém je s tým, že pri zväčšovaní/zmenšovaní okna celkom rada vyťažuje CPU.

Nemá niekto nápad ako to trochu vylepšiť? Keď mením veľkosť okna, tak mi CPU vybehne z 10% na 80%.

Ps.: Viem že väčšina ľudí takéto blbosti nerobí a prejaví sa to hlavne pri manuálnom testovaní, no rád by som, aby bol web čo najmenej náročný na PC.

Ukážka: http://jsfiddle.net/f4dahpn2/

Kód:

Kód: Vybrať všetko

$(document).ready(function() {
	var $allVideos = $('iframe[src*="player.vimeo.com"], iframe[src*="youtube.com"], iframe[src*="youtube-nocookie.com"], iframe[src*="kickstarter.com"][src*="video.html"], object, embed');

	$allVideos.each(function() {
		$(this).attr('data-aspectRatio', this.height / this.width).attr('style', 'max-width:'+this.width+'px; max-height:'+this.height+'px;').attr('width', '100%');
	});

	$(window).resize(function() {
		$allVideos.each(function() {
			$(this).attr('height', $(this).width() * $(this).attr('data-aspectRatio'));
		});
	}).resize();
});
sharky-no
King
King
Používateľov profilový obrázok
Príspevky: 1681
Registrovaný: 31 okt 2006, 19:53

Re: Fluid Iframe (YouTube....)

Príspevok od používateľa sharky-no »

na to ti staci obycajne css, staci ked mi kupis pivo :P
{je to v less, nechce sa mi to prepisovat do cisteho css, som spity} :lol:

Kód: Vybrať všetko


.video-responsive{
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  height: auto;
  iframe, object, embed{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
Michaelo
Hardcore addict
Hardcore addict
Používateľov profilový obrázok
Príspevky: 6177
Registrovaný: 16 júl 2008, 20:29
Bydlisko: Pri PC
Kontaktovať používateľa:

Re: Fluid Iframe (YouTube....)

Príspevok od používateľa Michaelo »

Ja viem, keby ze je ten web pre mna a veci tam pridavam ja, pouzijem CSS. Lenze dany clovek vie tak akurat skopirovat URL z YouTube do TinyMCE, preto to riesim cez jQuery a nechcem tam pridavat ziadne obalovacie divy.
sharky-no
King
King
Používateľov profilový obrázok
Príspevky: 1681
Registrovaný: 31 okt 2006, 19:53

Re: Fluid Iframe (YouTube....)

Príspevok od používateľa sharky-no »

to sa radsej pohrab v tom plugine co to vklada do toho editoru. obalit vysledny tag by nemal byt nejaky problem.
Michaelo
Hardcore addict
Hardcore addict
Používateľov profilový obrázok
Príspevky: 6177
Registrovaný: 16 júl 2008, 20:29
Bydlisko: Pri PC
Kontaktovať používateľa:

Re: Fluid Iframe (YouTube....)

Príspevok od používateľa Michaelo »

To som skusal, no prestalo ma bavit hrabat sa v minifikovanom JS kode, hlavne ked sa neda najst neminifikovana verzia. Preto to riesim takto. Inak by som samotny iframe pridaval uz rovno so stylom a obaleny v dive. I ked mi stale pride lepsie mat tam napevno nastavenu vysku a sirku ako pouzivat CSS hacky.

Druha vec je, ze v tom plugine mozes pridavat bud cez URL, alebo priamo embed kod. Hovoril som mu nech pouziva embed kod, lebo inak tam ma border atd., takze teraz niekedy pouzije URL a niekedy embed kod, cize tuna uz nepomoze ani uprava daneho pluginu, jedine ten jQuery.


Takze, je tu nejaka moznost ako to upravit, aby to nezralo tolko CPU?


//Edit:

Tak som nakoniec upravil jQuery kod. Toto by malo fungovat lepsie... Sranda, ze nikde na googli clovek nic normalne nenajde, len navody ako spravit, aby bolo video responzivne, no ignoruju maximalnu velkost prehravaca.... Meh.

http://jsfiddle.net/f4dahpn2/1/

Kód: Vybrať všetko

$(document).ready(function() {
	var $allVideos = $('iframe[src*="player.vimeo.com"], iframe[src*="youtube.com"], iframe[src*="youtube-nocookie.com"], iframe[src*="kickstarter.com"][src*="video.html"], object, embed');
    
    $allVideos.each(function() {
        var aspectRatio = (this.height / this.width) * 100;
        $(this).wrap("<div class='videoWrapper' style='padding-bottom: "+aspectRatio+"%;'></div>").attr('data-aspectRatio', aspectRatio).attr('style', 'max-width:'+this.width+'px; max-height:'+this.height+'px;').removeAttr('width').removeAttr('height');
	});
});
Ps.: Aj tento kod ma jeden maly problem. Ci vacsie je okno, tym je vacsi aj samotny padding. Takze ten obalovaci div je schopny mat vysku aj 1000px, I ked video v nom ma vysku len 480px... Nastavenie pevnej max-sirky nepomaha.... Sakra.
audiotrack
VIP
VIP
Používateľov profilový obrázok
Príspevky: 25958
Registrovaný: 09 sep 2005, 18:39
Kontaktovať používateľa:

Re: Fluid Iframe (YouTube....)

Príspevok od používateľa audiotrack »

Michaelo napísal:To som skusal, no prestalo ma bavit hrabat sa v minifikovanom JS kode, hlavne ked sa neda najst neminifikovana verzia. ...
http://jsbeautifier.org/ :smt006
Michaelo
Hardcore addict
Hardcore addict
Používateľov profilový obrázok
Príspevky: 6177
Registrovaný: 16 júl 2008, 20:29
Bydlisko: Pri PC
Kontaktovať používateľa:

Re: Fluid Iframe (YouTube....)

Príspevok od používateľa Michaelo »

Vdaka, to je pekna vecicka. No stale, pred tym pastoval len URL, teraz tam uz vklada priamo embed kod z YouTube, takze menenie toho scriptu mi moc nepomoze. Hlavne ked jeden z adminov to tam moze vkladat priamo cez HTML kod (bez toho pluginu).

Preto som upravil ten jQuery na wrapper...

//autoeditácia príspevku (01 Mar 2015, 13:58)
Tak som sa s tym este pohral, kedze moj povodny kod ma problemy ak je video v dive ktory ma display:none; a zasa wrapper mal problemy s prilis velkou vyskou.

Tuto je vidno co myslim tou vyskou: http://jsfiddle.net/f4dahpn2/2/
Tuto je upraveny kod s tou vyskou: http://jsfiddle.net/f4dahpn2/3/


Kod priamo k pouzitiu: http://jsfiddle.net/f4dahpn2/4/

Kód: Vybrať všetko

$(document).ready(function() {
	var $allVideos = $('iframe[src*="player.vimeo.com"], iframe[src*="youtube.com"], iframe[src*="youtube-nocookie.com"], iframe[src*="kickstarter.com"][src*="video.html"], object, embed');
    
    $allVideos.each(function() {
        var aspectRatio = (this.height / this.width) * 100;
        $(this).attr('data-aspectRatio', this.height / this.width).wrap("<div style='max-height: "+this.height+"px; max-width: "+this.width+"px; margin: 0 auto;'><div class='videoWrapper' style='padding-bottom: "+aspectRatio+"%;'></div></div>").attr('data-aspectRatio', aspectRatio).attr('style', 'max-width:'+this.width+'px; max-height:'+this.height+'px;').removeAttr('width').removeAttr('height');
	});
});
CSS:

Kód: Vybrať všetko

.videoWrapper {
	position: relative;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
Napísať odpoveď