>웹 프론트엔드 >CSS 튜토리얼 >YouTube iFrame에서 불투명한 Div를 어떻게 오버레이할 수 있나요?

YouTube iFrame에서 불투명한 Div를 어떻게 오버레이할 수 있나요?

DDD
DDD원래의
2024-12-31 12:53:16511검색

How Can I Overlay an Opaque Div on a YouTube iFrame?

YouTube iFrame 위에 불투명 Div 오버레이

iFrame을 사용하여 YouTube 동영상을 삽입하면 투명 div를 오버레이하려고 할 때 문제가 발생합니다. wmode="transparent"와 관련된 이전 방법은 더 이상 iFrame에 적용되지 않지만 불투명 div를 추가할 수 있는 솔루션이 있습니다.

핵심은 "wmode=opaque" GET 매개변수를 iFrame에 추가하는 데 있습니다. YouTube URL입니다. 이 매개변수는 iFrame에 불투명 모드를 사용하도록 지시하여 다른 요소보다 낮은 Z-색인을 생성합니다.

이를 제공된 코드에 적용하려면 다음과 같이 iFrame 태그의 URL을 업데이트하기만 하면 됩니다.

<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=opaque"는 URL의 첫 번째 매개변수여야 하며 그 뒤에 다른 매개변수가 있어야 합니다. 이렇게 변경하면 ID가 "overlay"인 div가 원하는 불투명도로 YouTube 동영상을 성공적으로 오버레이합니다.

위 내용은 YouTube iFrame에서 불투명한 Div를 어떻게 오버레이할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.