코딩스쿨

▶ HTML Media

1. YouTube 비디오를 웹 페이지에 삽입하는 방법

YouTube 비디오는 iframe 태그를 사용하여 웹 페이지에 쉽게 삽입할 수 있습니다. YouTube는 각 비디오에 대해 iframe을 통해 공유할 수 있는 코드를 제공합니다. 이를 통해 사용자는 웹 페이지 내에서 YouTube 비디오를 직접 시청할 수 있습니다.

기본 YouTube 비디오 삽입 예시:

<iframe width="560" height="315" src="<https://www.youtube.com/embed/비디오ID>"
        frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen>
</iframe>

src: 삽입할 YouTube 비디오의 URL입니다. 비디오의 ID를 포함하는 embed URL 형식을 사용합니다. 예: https://www.youtube.com/embed/비디오ID.
width와 height: 비디오의 가로 및 세로 크기를 지정합니다.
frameborder: 비디오의 테두리를 설정합니다. 0은 테두리를 없애는 옵션입니다.
allowfullscreen: 사용자가 비디오를 전체 화면으로 볼 수 있도록 허용합니다.

2. YouTube 비디오 ID 찾기

YouTube 비디오 URL에서 비디오 ID를 찾아야 iframe에 삽입할 수 있습니다. YouTube 비디오의 ID는 비디오 URL에서 찾을 수 있으며, 보통 v= 다음에 오는 문자열입니다.

예시:

비디오 URL: https://www.youtube.com/watch?v=dQw4w9WgXcQ
비디오 ID: dQw4w9WgXcQ

이 ID를 embed URL 형식으로 변환하면: https://www.youtube.com/embed/dQw4w9WgXcQ

3. YouTube에서 iframe 코드 복사하기

YouTube에서는 사용자가 직접 공유 옵션을 통해 iframe 코드를 생성할 수 있습니다.

단계:

YouTube에서 비디오를 재생합니다.
비디오 하단의 공유 버튼을 클릭합니다.
임베드 옵션을 선택하면 iframe 코드를 복사할 수 있습니다.
이 코드를 HTML 파일의 원하는 위치에 삽입합니다.

4. YouTube 비디오 옵션

YouTube 비디오를 웹 페이지에 삽입할 때, iframe URL에 몇 가지 추가 옵션을 지정할 수 있습니다.

4.1 자동 재생 (Autoplay)

비디오가 페이지 로드와 함께 자동으로 재생되도록 설정할 수 있습니다. 이를 위해 autoplay=1을 URL에 추가합니다.

<iframe width="560" height="315" src="<https://www.youtube.com/embed/비디오ID?autoplay=1>"
        frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

4.2 시작 시간 지정

비디오의 특정 시간부터 재생을 시작하려면 start=초를 URL에 추가할 수 있습니다.

<iframe width="560" height="315" src="<https://www.youtube.com/embed/비디오ID?start=60>"
        frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

위의 예시는 비디오가 60초(1분)부터 재생됩니다.

4.3 비디오 반복 재생 (Loop)

비디오를 반복 재생하려면 loop=1과 함께 playlist=비디오ID를 추가합니다.

<iframe width="560" height="315" src="<https://www.youtube.com/embed/비디오ID?loop=1&playlist=비디오ID>"
        frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

4.4 뮤트 (Mute)

비디오의 오디오를 자동으로 음소거하려면 mute=1을 추가합니다.

<iframe width="560" height="315" src="<https://www.youtube.com/embed/비디오ID?mute=1>"
        frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

5. 반응형 YouTube 비디오 만들기

YouTube 비디오의 크기를 고정 크기가 아닌, 반응형으로 만들어 다양한 화면 크기에 적응하도록 할 수 있습니다. 이를 위해 CSS에서 비디오 컨테이너의 크기를 조정하고, padding을 활용한 비율 기반의 크기 설정을 사용합니다.

반응형 YouTube 비디오 예시:

<style>
.responsive-video {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 비율 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
}

.responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>

<div class="responsive-video">
    <iframe src="<https://www.youtube.com/embed/비디오ID>"
            frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen></iframe>
</div>

위 코드는 비디오를 화면 크기에 맞춰 반응형으로 조정해줍니다.

6. YouTube 비디오 삽입 시 고려 사항

브라우저 호환성: 대부분의 최신 웹 브라우저는 iframe을 통해 YouTube 비디오를 삽입하는 것을 지원합니다.
성능: 웹 페이지에 너무 많은 비디오를 한 번에 삽입하면 페이지 로딩 속도에 영향을 줄 수 있습니다.

코딩 스쿨 HTML

HTML YouTube