iframe 동영상 위에 div 올리기
본문
iframe 유튜브 화면 위에 div로 흐릿한 글씨로 워터마크 넣고 싶은데
예전 wmode=tranparent 기능은 없는 것 같고 어떻게 하면 될까요?
답변 2
<style>
.ytb-wt-mark {
position: absolute;
text-align: right;
width: 100%;
}
</style>
<div class="ytb-area">
<div class="ytb-wt-mark"><img class="ybm-wt-mark-icon" src="여기에 워터마크 png 경로"></div>
<div class="ytb-palayer"><ifraim......./ifraim></div>
</div>
말씀대로 하니 영상위에 워터마크가 나오기는 하는데
워터마크 div가 영상을 덮어버리니 영상버튼들이 클릭이 안되네요.
워터마크 div 밑의 영상 버튼을 클릭할 수는 없을까요?
<style>
.ytb-area {
position: relative;
background: #dcdcdc;
width: 502px;
}
.ytb-wt-mark {
position: absolute;
right: 50px; /*오른쪽으로 부터 50px 이부분을 수정해가면서 위치 조정하세요*/
top: 30px; /*위로부터 30px */
background: #555555;/*이건 지우셔도 무방합니다.*/
width: 40px;/*이건 지우셔도 무방합니다.*/
height: 30px;/*이건 지우셔도 무방합니다.*/
}
.ytb-player {
height: 350px;
}
</style>
<div class="ytb-area">
<div class="ytb-wt-mark"><img class="ybm-wt-mark-icon" src="여기에 워터마크 png 경로"></div>
<div class="ytb-player"><ifraim....></ifraim></div>
</div>
iframe 위에 부모 div를 relative 속성을 두시고 아이프레임과 형제인 노드를 하나 만들어서 해당 노드를 z-index, absolute로 하여 원하는 위치에 배치하시면 됩니다.
정확하고 친절한 답변 감사드립니다~