모바일 가변비율 삽입 유튜브 영상 CSS 코드: 동영상 반응형 사이즈 만들기 (임베드, 임베디드, 임베딩)
모바일 웹사이트나 반응형 웹사이트를 제작할 때, 유튜브 동영상을 화면 크기에 맞게 자동으로 조정되도록 하는 것은 매우 중요합니다. 이 포스팅에서는 CSS를 이용하여 유튜브 동영상을 반응형 사이즈로 만드는 방법을 자세히 설명하겠습니다.
1. HTML 구조 만들기
우선, 유튜브 동영상을 포함할 HTML 구조를 만들어야 합니다. 이를 위해 동영상을 포함하는 <iframe> 태그를 감싸는 <div> 태그를 추가합니다.
기존 HTML 코드:
<iframe allowfullscreen class="BLOG_video_class" height="480" src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="870"></iframe>
수정된 HTML 코드:
<div class="video-container">
<iframe allowfullscreen class="BLOG_video_class" src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>
</div>
2. CSS 스타일 추가
이제, video-container 클래스에 CSS를 추가하여 동영상이 반응형으로 동작하도록 합니다. 다음 CSS 코드를 추가합니다.
.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 비율 */
height: 0;
overflow: hidden;
max-width: 100%;
background: #000;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
3. CSS 코드 설명
.video-container클래스는 동영상을 포함하는 부모 요소입니다. 이 요소는position: relative;로 설정하여 자식 요소인iframe이 절대 위치를 기준으로 배치될 수 있도록 합니다.padding-bottom: 56.25%;는 16:9 비율을 유지하기 위해 설정되었습니다. 56.25%는 16 divided by 9의 결과입니다.height: 0;은 요소의 높이를 0으로 설정하여padding-bottom이 높이를 결정하도록 합니다.overflow: hidden;은 넘치는 내용이 보이지 않도록 합니다.max-width: 100%;은 부모 요소의 최대 너비를 100%로 설정하여 화면 크기에 맞게 조정되도록 합니다.background: #000;은 배경을 검정색으로 설정하여 로드 중에 나타나는 배경 색상을 지정합니다.
.video-container iframe클래스는iframe요소에 적용됩니다.position: absolute;로 설정하여 부모 요소의 위치를 기준으로 배치됩니다.top: 0;과left: 0;으로 위치를 부모의 왼쪽 상단으로 설정합니다.width: 100%;과height: 100%;으로 부모 요소의 너비와 높이에 맞춰 동영상을 확장합니다.border: 0;으로 테두리를 제거합니다.
완성된 코드
아래는 모든 내용을 포함한 완성된 HTML 코드입니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive YouTube Video</title> <style> .video-container { position: relative; padding-bottom: 56.25%; /* 16:9 비율 */ height: 0; overflow: hidden; max-width: 100%; background: #000; } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } </style> </head> <body> <div class="video-container"> <iframe allowfullscreen class="BLOG_video_class" src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe> </div> </body> </html>
이제 유튜브 동영상이 반응형으로 화면 크기에 맞게 자동으로 조정됩니다. 모바일 환경에서도 화면 크기에 맞춰 동영상이 제대로 표시되며, CSS를 이용해 간단하게 구현할 수 있습니다. 이 방법을 사용하면 다양한 기기에서 일관된 사용자 경험을 제공할 수 있습니다.
* 기타 다른 방법 - 구글링으로 확인
Tags:
블로그