Youtube Responsive Embed Yapımı

  Css - Html    13 Ağustos 2015
1 Yorum

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.



  Benzer Yazılar


  Yorumlar

  • youtube video indir

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

sponsor reklam flexispy sponsor reklam alastyr

  Sosyal Medya

  Popüler Yazılar