ซ้อนทับ div ทึบแสงบน youtube iframe

ฉันจะซ้อนทับ div ด้วยความทึบกึ่งโปร่งใสบนวิดีโอที่ฝัง iframe ของ youtube ได้อย่างไร

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

แก้ไข (เพิ่มคำอธิบายเพิ่มเติม): HTML5 กำลังเข้ามาใกล้เราโดยมีอุปกรณ์ที่ใช้แทนแฟลชมากขึ้นเรื่อย ๆ ซึ่งทำให้การฝังวิดีโอ youtube ยุ่งยากโชคดีที่ youtube มี iFrame แบบฝังพิเศษที่จัดการปัญหาความเข้ากันได้ของการฝังวิดีโอทั้งหมด แต่ ตอนนี้วิธีการทำงานก่อนหน้านี้ในการวางซ้อนออบเจ็กต์วิดีโอด้วย div กึ่งโปร่งใสใช้ไม่ได้อีกต่อไปตอนนี้ฉันไม่สามารถเพิ่ม a <param name="wmode" value="transparent">ลงในวัตถุได้เนื่องจากตอนนี้เป็น iFrame แล้วฉันจะเพิ่ม div ทึบแสงที่ด้านบนของ วิดีโอที่ฝัง iframe?

ข้อมูลจากเว็บไซต์ Adobe อย่างเป็นทางการเกี่ยวกับปัญหานี้

ปัญหาคือเมื่อคุณฝังลิงก์ youtube:

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

ใน iFrame wmode เริ่มต้นจะถูกกำหนดหน้าต่างซึ่งโดยพื้นฐานแล้วจะให้ z-index มากกว่าทุกอย่างอื่น ๆ และมันจะซ้อนทับอะไรก็ได้

ลองผนวกพารามิเตอร์ GET นี้เข้ากับ URL ของคุณ:

wmode = ทึบแสง

ดังนี้:

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

ตรวจสอบให้แน่ใจว่าเป็นพารามิเตอร์แรกใน URL พารามิเตอร์อื่น ๆ ต้องตามหลัง

ในแท็ก iframe:

ตัวอย่าง:

<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 fix จะใช้ได้ก็ต่อเมื่อเป็นเช่นนั้นก่อน

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

ไม่

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

อืม ... คราวนี้มันต่างอะไรกัน? http://jsfiddle.net/fdsaP/2/

แสดงผลใน Chrome ได้ดี คุณต้องการข้ามเบราว์เซอร์หรือไม่? มันช่วยเฉพาะเจาะจง

แก้ไข : Youtube แสดงผลobjectและembedไม่มีชุด wmode อย่างชัดเจนซึ่งหมายความว่ามันเริ่มต้นที่ "หน้าต่าง" ซึ่งหมายความว่ามันซ้อนทับทุกอย่าง คุณต้อง:

a) โฮสต์เพจที่มีอ็อบเจ็กต์ / โค้ดฝังด้วยตัวคุณเองและเพิ่มองค์ประกอบพารามิเตอร์ wmode = "transparent" ให้กับอ็อบเจ็กต์และแอ็ตทริบิวต์เพื่อฝังหากคุณเลือกที่จะให้บริการทั้งสององค์ประกอบ

b) หาวิธีให้ youtube ระบุสิ่งเหล่านั้น

ฉันใช้เวลาหนึ่งวันในการยุ่งกับ CSS ก่อนที่จะพบเคล็ดลับ anataliocs เพิ่มwmode=transparentเป็นพารามิเตอร์ให้กับ URL ของ YouTube:

<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>

สิ่งนี้ช่วยให้ iframe สามารถสืบทอดดัชนี z ของคอนเทนเนอร์เพื่อให้ทึบแสงของคุณ<div>อยู่ด้านหน้า iframe

การซ้อนทับแบบทึบมีวัตถุประสงค์เพื่อความสวยงามหรือไม่?

ในกรณีนี้คุณสามารถใช้:

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

"pointer-events: none" จะเปลี่ยนพฤติกรรมการวางซ้อนเพื่อให้ทึบแสงได้ แน่นอนว่าจะใช้ได้เฉพาะกับเบราว์เซอร์ที่ดีเท่านั้น