유튜브 비디오를 삽입한 뒤에 동영상 크기를 내 마음대로 조절하기가 너무 어렵습니다. 이 글에서는 유튜브 동영상 퍼올 때 화면에 꽉차게 크기와 비율을 설정하는 방법과 비율이 9:16인 유튜브 동영상을 전체 너비 및 높이로 삽입하는 방법에 대해 설명합니다.
일반적으로 유튜브 동영상 소스 코드의 width 및 height 속성을 수정하면 크기나
비율을 조정할 수 있습니다. width='560',
height='315'는 16:9 비율로 가로로 동영상을 볼 때 적합한
비율입니다.
다만, 유튜브 동영상 퍼가기 소스 코드를 그대로 적용하면 화면 양 옆에 또는 위쪽과 아래쪽에 "검은색 바"가 생깁니다.
아래에서 삽입(embedded)된 유튜브 동영상의 "검은색 바"를 없애고, 화면 크기에 맞게 비율이 줄어드는 방법에 대해 설명합니다.
(가로) 유튜브 동영상 퍼갈 때 화면에 꽉차게 설정하기
먼저 블로그 에디터에서 HTML을 수정할 수 있는 모드로 변경한 뒤 아래의 단계별 가이드에 따라 진행합니다.
1. iframe 상위 요소(div)를 만듭니다.
<div class="ytLandscape"> </div>
2. 유튜브 공유 > 퍼가기 > 소스 코드(iframe)를 복사 후 div 사이에 붙여넣습니다.
<div class="ytLandscape">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/SigIbCVMTzU"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
3. css 스타일을 추가합니다.
/* Youtube fullpage */
.ytLandscape {
position: relative;
padding-bottom: 56.25%;
}
.ytLandscape iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
}
4. 이제 상하 여백이 없어지고 화면이 꽉차게 표시됩니다.
Note:
가로 모드: Landscape (horizontal)
세로 모드: Portrait (vertical)
(세로) 모바일 유튜브 쇼츠, 직캠 동영상 화면에 꽉차게 설정하기
유튜브 쇼츠나 직캠과 같은 세로 동영상은 모바일 스마트폰 화면에 최적화되어 있습니다. 그래서 위의 설명대로 적용했을 때 유튜브 동영상이 화면에 꽉차게 나오지 않고 좌우에 여백(검은색 투명한 배경)이 생길 수 있습니다.
16:9 비율을 9:16 비율로 변경해주어야 좌우 여백 없이 화면에 꽉차게 나옵니다.
|
|
| 출처: 스브스케이팝 / SBS KPOP |
첫 번째 방법에서 몇 가지만 수정하면 됩니다.
1. width 및 height 속성값을 9:16 비율로 수정합니다.
<div class="ytPortrait">
<iframe
width="315"
height="560"
src="https://www.youtube.com/embed/0gRlwDBaris"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
2. iframe 상위요소의 클래스(class) 이름을 수정합니다.
<div class="ytPortrait">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/0gRlwDBaris"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
3. css에서 클래스 이름을 수정합니다.
.ytPortrait {
...
}
.ytPortrait iframe {
...
}
4. padding-bottom: 56.25% 속성값을 "177.777%"로 수정합니다.
.ytPortrait {
position: relative;
padding-bottom: 177.777%;
}
.ytPortrait iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
}
5. 이제 유튜브 동영상이 꽉찬 화면으로 나옵니다.
출처:
BANGTANTV