Youtube Responsive Embed Yapımı

Sitenizde youtube videoları paylaşıyorsanız düzgün görüntülenmesini istersiniz. Bilgisayardan düzgün gözükecektir ama telefon ve ya tabletten düzgün gözükmeyebilir. Bu yüzden responsive youtube embed kullanmalısınız. Youtube responsive embed sayesinde videolarınız da her çözünürlüğe uygun olacak.  Bu işlem çok kolaydır. Size vereceğim kodları eklemeniz yeterli.
Css Kodları
[css]
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
[/css]

HTML Kodları
[php]
<div class=’embed-container’><iframe src=’https://www.youtube.com/embed/Ud4HuAzHEUc’ frameborder=’0′ allowfullscreen></iframe></div>
[/php]

CSS kodlarını temanızın style.css dosyasına ekleyin. HTML kodunu da göstermek istediğiniz yere yapıştırmanız gerekiyor. Mesela bir konu içine yapıştırabilirsiniz.

HTML ve CSS (Birleşik Tek Kod)
[php]
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class=’embed-container’><iframe src=’https://www.youtube.com/embed/Ud4HuAzHEUc’ frameborder=’0′ allowfullscreen></iframe></div>
[/php]

Daha Kısa ve Basit Bir Yol
[php]<iframe width="420" height="315" src="https://www.youtube.com/embed/gk0aZ6Ic9II" frameborder="0" allowfullscreen></iframe>[/php]
Yukarıdaki kod herhangi bir youtube videosunun embed kodudur. Koddaki width=”420″ height=”315″ bunları width=”100%” height=”100%” olarak değiştirirseniz temaya göre full genişlik olacaktır. Bu boyutları istediğiniz gibi değiştirebilirsiniz.