YouTube 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.