youtube iframe üzerine opak div kaplaması

Youtube iframe gömülü videonun üzerine yarı şeffaf opaklığa sahip bir div'i nasıl kaplayabilirim?

<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ" frameborder="0"></iframe>
<div id="overlay"></div>

CSS

#overlay {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#000;
    opacity:0.8;
    /*background:rgba(255,255,255,0.8); or just this*/
    z-index:50;
    color:#fff;
}

düzenleme (daha fazla açıklama eklendi): HTML5 bize yaklaşıyor, flash yerine onu kullanan ve youtube videolarının gömülmesini zorlaştıran daha fazla cihazla, neyse ki youtube, tüm video yerleştirme uyumluluk sorunlarını ele alan özel bir gömülebilir iFrame sağlıyor, ancak artık bir video nesnesini yarı saydam bir div ile kaplamanın önceden çalışan yöntemi artık geçerli değil, artık <param name="wmode" value="transparent">nesneye bir ekleyemiyorum , çünkü bu artık bir iFrame, öyleyse üstüne opak bir div nasıl ekleyebilirim? iframe katıştırılmış video?

Resmi Adobe sitesinden bu sorunla ilgili bilgiler

Sorun, bir youtube bağlantısı yerleştirdiğinizde ortaya çıkar:

https://www.youtube.com/embed/kRvL6K8SEgY

Bir iFrame'de, varsayılan wmode pencerelidir, bu da ona diğer her şeyden daha büyük bir z-indeksi verir ve her şeyin üzerine bindirir.

Bu GET parametresini URL'nize eklemeyi deneyin:

Wmode = opak

böyle:

https://www.youtube.com/embed/kRvL6K8SEgY?wmode=opaque

URL'deki ilk parametresi olduğundan emin olun. Diğer parametreler sonradan gitmeli

İframe etiketinde:

Misal:

<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ?wmode=opaque" frameborder="0"></iframe>

Wmode = transparent düzeltmesinin yalnızca ilk önce çalıştığını unutmayın.

http://www.youtube.com/embed/K3j9taoTd0E?wmode=transparent&rel=0

Değil

http://www.youtube.com/embed/K3j9taoTd0E?rel=0&wmode=transparent

Hmm ... bu sefer farklı olan ne? http://jsfiddle.net/fdsaP/2/

Chrome'da iyi işlenir. Çapraz tarayıcıya ihtiyacınız var mı? Spesifik olmaya gerçekten yardımcı oluyor.

DÜZENLEME : Youtube hale objectve embedüzerine yerleştirileceği araç "pencere" için bunu varsayılan anlamı hiçbir açık wmode seti ile her şeyi . Şunlardan birine ihtiyacınız var:

a) Object / embed kodunu içeren sayfayı kendiniz barındırın ve nesneye wmode = "transparent" param öğesi ve her iki öğeye de hizmet vermeyi seçerseniz yerleştirilecek özniteliği ekleyin

b) Youtube'un bunları belirtmesi için bir yol bulun.

Bir katalizör ipucu bulmadan önce bir gün CSS ile uğraştım. Ekle wmode=transparentYouTube URL'ye bir parametre olarak:

<iframe title=<your frame title goes here> 
    src="http://www.youtube.com/embed/K3j9taoTd0E?wmode=transparent"  
    scrolling="no" 
    frameborder="0" 
    width="640" 
    height="390" 
    style="border:none;">
</iframe>

Bu, iframe'in kapsayıcısının z-endeksini devralmasına olanak tanır, böylece opakınız <div>iframe'in önünde olur.

Opak kaplama estetik amaçlı mı?

Öyleyse, şunları kullanabilirsiniz:

#overlay {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 50;
        background: #000;
        pointer-events: none;
        opacity: 0.8;
        color: #fff;
}

'işaretçi olayları: yok', bindirme davranışını fiziksel olarak opak olacak şekilde değiştirecektir. Tabii ki, bu yalnızca iyi tarayıcılarda çalışacaktır.