250x250
Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

진스

반응형 사이트 유튜브 영상 삽입 본문

Html

반응형 사이트 유튜브 영상 삽입

입방정 2022. 7. 18. 22:23
728x90
<figure class="youtube_video">
    <iframe src="https://www.youtube.com/..." title="..." frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</figure>
.cate_no_contents .youtube_video{position:relative;padding-bottom:56.25%; margin: 0 auto}
.cate_no_contents .youtube_video iframe{position:absolute;  top: 0; left: 0; right: 0; bottom: 0; width:100%; height: 100%;}

자식요소 (iframe)에  position : absolute로 설정,

부모 요소(youtube_video)는 padding-bottom 값을 56.25%  설정

여기서 56.25%는 16: 9 비율을 계산했을때 높이가 가로에 비해 56.25%를 차지하기 때문

728x90

'Html' 카테고리의 다른 글

모바일 input 박스 포커스 + 가상 키보드 이슈  (0) 2023.03.22
동영상, 이미지 1:1 비율로 유지  (0) 2022.07.18
레진 WAI-ARIA 가이드라인  (0) 2022.02.01
버튼에 타입을 쓰는 이유 (button type="button")  (0) 2021.10.19
접근성을 위한 role  (0) 2021.08.25
'Html' Related Articles more
Comments