티스토리 뷰

WebPublisher/CSS

[css] 유튜브 영역 반응형으로 잡기

amanda 2022. 9. 22. 13:50 
<div class="video-wrap">
    <iframe id="video" width="100%" height="315" src="https://www.youtube.com/embed/l9OFVBkhBVY" frameborder="0" allow="encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
.video-wrap {position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden;}
.video-wrap iframe,
.video-wrap object,
.video-wrap embed {position:absolute; top:0; left:0; width:100%; height:100%;}

*참고

https://code-study.tistory.com/35

 

유튜브(Youtube) 영상 비율에 맞게 (반응형 사이즈)로 가져오기

유튜브(Youtube) 영상 비율에 맞게 (반응형 사이즈)로 가져오기 (YouTube videos in responsive size) 웹페이지 또는 개인 블로그 내에 Youtube영상을 삽입해야하는 경우가 있다. Youtube에서는 ..

code-study.tistory.com

 

저작자표시

'WebPublisher > CSS' 카테고리의 다른 글

[html] transform 사용 시 z-index 설정  (0) 2022.11.17
[css] print / 프린트용 페이지 style  (0) 2022.10.11
[css] display: table 시 iOS에서 레이아웃 깨짐 현상  (0) 2022.08.22
[css] table caption (iOS에서 레이아웃 깨짐 문제)  (0) 2022.08.09
[CSS] 게시판 에디터(editor)에서 사용자가 입력한 대로 나오게 하기  (0) 2022.07.28
공지사항