Bu sitedeki her şey ile kodlanmıştır.

Kategori Listesini Göster

YouTube Videolarını Otomatik Responsive Yapmak


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.

  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