유튜브 동영상을 블로그에 공유할때, 유튜브 영상의 일부만 공유하고 싶을때가 있다. 이럴때, iframe 태그를 사용할 때 재생할 시간을 지정하는 방법을 소개한다.
YouTube에서 공유하려는 동영상의 URL을 복사합니다.
-6516936cd8c9d0.33481675.png)
유튜브 화면에서 마우스 오른쪽 버튼을 누르시면, 동영상 주소 또는 iframe 소스코드를 바로 복사할 수 있는 메뉴박스가 표시됩니다.
블로그 Post에 다음과 같은 iframe 태그를 HTML 코드로 추가
HTML
<iframe src="https://www.youtube.com/embed/[동영상 ID]" width="560" height="315" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe>
start 속성을 사용하여 동영상의 시작 시간을 지정
HTML
<iframe src="https://www.youtube.com/embed/[동영상 ID]" width="560" height="315" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen start="00:00:00"> </iframe>
end 속성을 사용하여 동영상의 종료 시간을 지정
HTML
<iframe src="https://www.youtube.com/embed/[동영상 ID]" width="560" height="315" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen start="00:00:00" end="00:00:30"> </iframe>
예를 들어, 동영상의 ID가 ABC123이고 시작 시간을 1분, 종료 시간을 3분으로 지정하려면 다음과 같은 iframe 태그를 사용합니다.
적용 예시
예를 들어, 동영상의 ID가 ABC123이고 시작 시간을 1분, 종료 시간을 3분으로 지정하려면 다음과 같은 iframe 태그를 사용합니다.
HTML
<iframe src="https://www.youtube.com/embed/ABC123" width="560" height="315" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen start="00:01:00" end="00:03:00"> </iframe>
예를 들어, 동영상의 ID가 ABC123이고 시작 시간을 1분, 종료 시간을 3분으로 지정하려면 다음과 같은 iframe 태그를 사용합니다.
참고사항
◼︎ start 속성과 end 속성은 선택 사항입니다. 이 속성을 지정하지 않으면 동영상은 처음부터 끝까지 재생됩니다. ◼︎ start 속성과 end 속성의 값은 동영상의 총 재생 시간보다 작거나 같아야 합니다. 이상으로 YouTube에서 동영상을 블로그에 공유하면서 iframe 태그를 사용할 때 재생할 시간을 지정하는 방법에 대해 알아보았습니다.
