Notice
Recent Posts
Recent Comments
Tags more
«   2025/12   »
일 월 화 수 목 금 토
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
Archives
Today
Total
관리 메뉴

웹개발자의 기지개

[CSS] Youtube 소스 붙이기 - 반응형 형태로 붙이기 본문

웹퍼블리싱

[CSS] Youtube 소스 붙이기 - 반응형 형태로 붙이기

웹개발자 워니 2025. 10. 15. 12:12

 

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<style>
.video-embed-full {
  width: 100%;
  margin: 0;
  padding: 0;
}
 
.ratio {
  width: 100%;
  background: #000;
  overflow: hidden;
}
 
.ratio-16x9 {
  aspect-ratio: 16 / 9; /* 현대 브라우저용 */
}
 
.ratio iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
 
/* 구형 브라우저 대응 */
@supports not (aspect-ratio: 1 / 1) {
  .ratio-16x9 {
    position: relative;
    padding-top: 56.25%; /* 16:9 비율 */
  }
  .ratio-16x9 iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
}
</style>
 
 
<div class="video-embed-full">
  <div class="ratio ratio-16x9">
    <iframe
      src="https://www.youtube-nocookie.com/embed/YxrmZq-BaS0?si=aaaaaaaa&rel=0&modestbranding=1&playsinline=1"
      title="YouTube video player"
      loading="lazy"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      referrerpolicy="strict-origin-when-cross-origin"
      allowfullscreen>
    </iframe>
  </div>
</div>
 cs

 

 

가로폭 100%로 반응형 형태로 꽉 채우는 Youtube 소스

16 * 9 비율도 유지하기

 

'웹퍼블리싱' 카테고리의 다른 글

[CSS] 표형식 삼단/이단 나열하기 - 반응형 코딩  (0) 2025.10.19
[CSS] 특수기호 문자하나 넣고 다음줄에 들여쓰기 해보기  (0) 2025.10.15
[웹퍼블리싱] 기본 모달창 만들기 2  (0) 2025.09.24
[웹퍼블리싱] 동영상 자막 연동하기  (0) 2025.09.18
[웹퍼블리싱] 반응형 코딩 table , PC / 모바일 구분 예제 1  (1) 2025.09.06
'웹퍼블리싱' Related Articles more
Comments