Dikkat

Artık daha güncel bir blog olacak !

  • Cem Karakurt
  • 23 Okunma
  • 13 Ağustos 2015
  • 1

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ı

.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%; }

HTML Kodları

<div class='embed-container'><iframe src='https://www.youtube.com/embed/Ud4HuAzHEUc' frameborder='0' allowfullscreen></iframe></div>

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)

<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>
Eğer video boyunu sabitlemek isterseniz allowfullscreen yazısından önce style=’height:500px’ kodunu ekleyin. 500 video yüksekliğidir.

Daha Kısa ve Basit Bir Yol

<iframe width="420" height="315" src="https://www.youtube.com/embed/gk0aZ6Ic9II" frameborder="0" allowfullscreen></iframe>

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.

Kodlarda yazan “https://www.youtube.com/embed/Ud4HuAzHEUc” adresini istediğiniz videonun embed adresi ile değiştirin. Linkin sonundaki “Ud4HuAzHEUc” video id sidir.
  • 13 Ağustos 2015 tarihinde yazıldı.
  • 1 yorum yapıldı.

Yorumlar (1 Yorum)

  • youtube video indir yazmış:

    Bilgi için teşekkürler.Youtube embed olayını bilmeyenler için güzel ve açıklayıcı bir anlatım olmuş.

Yazı hakkında görüşlerinizi belirtmek istermisiniz?