Tavsiye: Google Belgeseli – Türkçe (Bir Başarı Hikâyesi) Hatırlayalım: Lizzie Velasquez: Gerçek Bir Mücadele Öyküsü
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.874 yazıda 8.172 yorum bulunmaktadır.
Yukarı Çık