Tavsiye: 12 Adımda Pazartesi Sendromunu Yenin! Hatırlayalım: 10 Adımda Pozitif Olma Rehberi
Fatih Özel Kolej

YouTube Videolarını Otomatik Responsive Yapmak

Sponsorlu Bağlantılar

YouTube Videolarını Otomatik Responsive YapmakYouTube videolarını otomatik Responsive yapmak hk. çok araştırma yaptım. Sizler için iki adet çözüm yolu sunuyor olacağım. Bunlardan birisi jQuery bazında çözüm önerisi olup, tüm tarayıcılar ile sorunsuz çalışmaktadır. Ancak siz daha çok JavaScript ile çözüm yolu kullanmayı düşünürseniz, onu da paylaşacağım. Aşağıdaki kodları temanızın “body” etiketinden önce eklemeniz, yeterli olacaktır. Kodları değiştirmeden eklerseniz, sorunsuz olarak kullanabilirsiniz.

YouTube Videolarını Otomatik Responsive Yapmak

1) jQuery ile YouTube Videolarını Responsive Yapalım

(function ( window, document, undefined ) {
var iframes = document.getElementsByTagName( 'iframe' );
for ( var i = 0; i < iframes.length; i++ ) {
var iframe = iframes[i],
players = /www.youtube.com|player.vimeo.com/;
if ( iframe.src.search( players ) > 0 ) {
var videoRatio = ( iframe.height / iframe.width ) * 100;
iframe.style.position = 'absolute';
iframe.style.top = '0';
iframe.style.left = '0';
iframe.width = '100%';
iframe.height = '100%';
var wrap = document.createElement( 'div' );
wrap.className = 'fluid-vids';
wrap.style.width = '100%';
wrap.style.position = 'relative';
wrap.style.paddingTop = videoRatio + '%';
var iframeParent = iframe.parentNode;
iframeParent.insertBefore( wrap, iframe );
wrap.appendChild( iframe );
}
}
})( window, document );

2) JavaScript ile YouTube Videolarını Responsive Yapalım

$(function() {
var $allVideos = $("iframe[src*='www.youtube.com'], iframe[src*='player.vimeo.com']");
$allVideos.each(function() {
$(this)
.data('aspectRatio', this.height / this.width)
.removeAttr('height')
.removeAttr('width');
});
$(window).resize(function() {
$allVideos.each(function() {
var $el = $(this);
var newWidth = $el.parent().width();
$el
.width(newWidth)
.height(newWidth * $el.data('aspectRatio'));
});
}).resize();
});

Not: Sitenizde lütfen jQuery kütüphanesi olduğundan emin olun.

Sponsorlu Bağlantılar


Teknobeyin Facebook
Sayfasını Bugün Beğenin!
  1. Yorum bulunmamaktadır.

Bu yazıya yorum göndermek ister misiniz?

Dikkat: Her yorum gönderen kişi, kendi gönderdiği yorumdan sorumlu olmaktadır.
Not: Yazı ile herhangi bir ilgisi bulunmayan yorumların onaylanmadığını belirtmek isteriz.
Yazı Etiketleri
Bugün Günlerden: . Toplam 19 kategorideki 7.957 yazıda 8.259 yorum bulunmaktadır.
Yukarı Çık