테스트 사이트 - 개발 중인 베타 버전입니다

iframe 동영상 위에 div 올리기 채택완료

고기조아 4년 전 조회 2,698

iframe 유튜브 화면 위에 div로 흐릿한 글씨로 워터마크 넣고 싶은데

예전 wmode=tranparent 기능은 없는 것 같고 어떻게 하면 될까요?

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트
뚜찌빠찌

</p>

<p><style></p>

<p>.ytb-wt-mark {</p>

<p> position: absolute;</p>

<p>text-align: right;</p>

<p>width: 100%;</p>

<p>}</p>

<p></style></p>

<p><div class="ytb-area"></p>

<p><div class="ytb-wt-mark"><img class="ybm-wt-mark-icon" src="여기에 워터마크 png 경로"></div></p>

<p><div class="ytb-palayer"><ifraim......./ifraim></div></p>

<p></div></p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

고기조아
4년 전
말씀대로 하니 영상위에 워터마크가 나오기는 하는데
워터마크 div가 영상을 덮어버리니 영상버튼들이 클릭이 안되네요.
워터마크 div 밑의 영상 버튼을 클릭할 수는 없을까요?
뚜찌빠찌
4년 전
<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>

댓글을 작성하려면 로그인이 필요합니다.

4년 전

iframe 위에 부모 div를 relative 속성을 두시고 아이프레임과 형제인 노드를 하나 만들어서 해당 노드를 z-index, absolute로 하여 원하는 위치에 배치하시면 됩니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

고기조아
4년 전
정확하고 친절한 답변 감사드립니다~

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인