Kullandığımız temayı ne kadar beğeniyor olsak da illa bir yerde bir sorun çıkar. Bir eksiklik yada bizim için çok önemli bir ihtiyaç gibi olan özellikleri kullanırken temamız desteklemiyor ve sorun oluşmasına neden olabiliyor. Arada bir beğendiğim yada birilerine destek olmak için Youtube videolarını sitemde yayınlamayı düşünyordum. Ama yazıya eklediğimiz video maalesef tam genişlikte olamıyor yada istediğimiz çerçeve özelliklerini ekleyemiyoruz. Çünkü Youtube video gömdüğümüz zaman iframe kodu alırız ve videoya ait genişlik ve yükseklik ayarları da video içinde hazır halde olur. Sadece iframe içindeki stil kodlarını düzenleyerek tam ekran olarak ayarlayabilmemiz mümkün. O zamanda esneklik olmaz yada yükseklik istediğimiz gibi olmaz.

Tam anlamıyla kusursuz bir Youtube videosu kullanmanın da yolu var elbette. Hemen alt kısımda verdiğim kodları bahsi geçen yerlere eklediğinizde sorunsuz bir şekilde responsive (esnek) videolar kullanmaya başlayabilirsiniz artık. Kodları temanıza yerleştirir yerleştirmez eskiden eklemiş olduğunuz videolar da responsive olacak şekilde yazılarınızda görünecektir.

Function.php dosyasına eklemeniz gereken kod:

/**
* WordPress youtube videolarını responsive esnek yapma
*/
function abl1035_alx_embed_html( $html ) {

return '<div class="video-container">' . $html . '</div>';
}
add_filter( 'embed_oembed_html', 'abl1035_alx_embed_html', 10, 3 );
add_filter( 'video_embed_html', 'abl1035_alx_embed_html' ); // Jetpack

Alttaki Css kodlarını da stil dosyanıza ekleyin:

.video-container { 
  position: relative; 
  padding-bottom: 56.25%; 
  height: 0; 
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto;
}
  
.video-container iframe, .video-container object, .video-container embed, .video-container video { 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0;
  width: 100%;
  height: 100%;
}

Örnek bir video

Bende sitemde aynı kodları kullanıyorum ve eğer test etmek istiyorsanız tarayıcı ekranınızın boyutunu küçülterek videonun nasıl tarayıcıya göre küçüldüğünü inceleyebilirsiniz.