overlay div mờ trên iframe youtube

Làm cách nào để phủ một div có độ mờ nửa trong suốt lên video nhúng 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;
}

chỉnh sửa (bổ sung làm rõ hơn): HTML5 đang tiếp cận chúng ta, với ngày càng nhiều thiết bị sử dụng nó thay vì flash, điều này làm phức tạp thêm việc nhúng video youtube, rất may youtube cung cấp một iFrame có thể nhúng đặc biệt để xử lý tất cả các vấn đề tương thích nhúng video, nhưng bây giờ phương pháp làm việc trước đây của việc phủ một đối tượng video với một div nửa trong suốt không còn hợp lệ nữa, tôi hiện không thể thêm một <param name="wmode" value="transparent">vào đối tượng, vì nó bây giờ là một iFrame, vậy làm cách nào để thêm một div mờ ở trên video nhúng iframe?

Thông tin từ trang web chính thức của Adobe về vấn đề này

Vấn đề là khi bạn nhúng liên kết youtube:

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

trong iFrame, wmode mặc định được mở cửa sổ về cơ bản cung cấp cho nó chỉ số z lớn hơn mọi thứ khác và nó sẽ phủ lên bất kỳ thứ gì.

Hãy thử nối thông số GET này vào URL của bạn:

wmode = mờ đục

như vậy:

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

Đảm bảo rằng nó là tham số đầu tiên trong URL. Các thông số khác phải đi sau

Trong thẻ iframe:

Thí dụ:

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

Lưu ý rằng bản sửa lỗi wmode = transparent chỉ hoạt động nếu lần đầu tiên như vậy

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

không phải

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

Hmm ... lần này có gì khác? http://jsfiddle.net/fdsaP/2/

Kết xuất trong Chrome tốt. Bạn có cần nó trên nhiều trình duyệt không? Nó thực sự giúp ích cho việc cụ thể.

CHỈNH SỬA : Youtube hiển thị objectvà embedkhông có bộ mã wmode rõ ràng, có nghĩa là nó được đặt mặc định thành "window" có nghĩa là nó phủ lên mọi thứ . Bạn cần:

a) Tự lưu trữ trang có chứa đối tượng / mã nhúng và thêm phần tử param wmode = "transparent" vào đối tượng và thuộc tính để nhúng nếu bạn chọn phân phối cả hai phần tử

b) Tìm cách để youtube chỉ rõ những.

Tôi đã dành một ngày lộn xộn với CSS trước khi tôi tìm thấy mẹo anataliocs. Thêm wmode=transparentdưới dạng tham số vào 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>

Điều này cho phép iframe kế thừa chỉ số z của vùng chứa của nó, do đó vùng mờ của bạn <div>sẽ nằm trước iframe.

Lớp phủ mờ đục có phục vụ mục đích thẩm mỹ không?

Nếu vậy, bạn có thể sử dụng:

#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' sẽ thay đổi hành vi lớp phủ để nó có thể không rõ ràng về mặt vật lý. Tất nhiên, điều này sẽ chỉ hoạt động trong các trình duyệt tốt.