Sitenize eklediğiniz Youtube embed videosunda z-index problemi…

Merhaba sizlere yeni karşılaşmış olduğum bir problemin çözümünden bahsedeceğim. Belki aynı sorunla karşılaşanlar için bir çözüm olur…

Web sitenize Youtube‘tan embed olarak bir video eklediniz. Ve videonun üzerine denk gelen fixed veya absolute içeriğiniz var. (Bu açılır menünüz veya sayfa üzerinde açılan pop-up tarzı bilgilendirme içerikleriniz gibi içerikleriniz olabilir.)

Ve bu içerik üstteki örnekte olduğu gibi videonun altında kalıyorsa ilk yapmanız gereken şey; üstte görünmesini istediğiniz içeriğin css tanımlamalarına yüksek değerli z-index girmenizdir.

örnek kod :

#socialPopup { z-index:99999; } 

şeklinde…

Fakat bu işlem her zaman işe yaramayabilir. Bunun sebebi, embed olarak eklediğiniz videonun flash içerikli olmasında ve ayarlarının düzenlenmemiş olmasındandır.

Bu ayarlamaya geçecek olursak, standart bir youtube embed kodu aşağıdaki gibidir.

<iframe width="560" height="315"
src="//www.youtube.com/embed/7BGQMK6OCfg" frameborder="0" allowfullscreen></iframe>

Siz bu kodun adres kısmına ?wmode=transparent kodunu ekleyin. Ve kodunuz aşağıdaki şekilde olsun..

<iframe width="560" height="315"
src="//www.youtube.com/embed/7BGQMK6OCfg?wmode=transparent" frameborder="0"
allowfullscreen></iframe>

Bu değişikliği de yaptığınızda, artık içeriğiniz üstte çıkacaktır.