<devsite-video> 맞춤 요소를 사용하여 DevSite 페이지에 YouTube 동영상을 직접 삽입할 수 있습니다. 모든 동영상은 반응형이며 표시 영역 너비가 변경될 때 16:9 비율을 유지합니다.
YouTube 동영상을 삽입하려면 페이지에 <devsite-video> 맞춤 요소를 추가하고 video-id 속성을 동영상의 v URL 매개변수 값으로 설정합니다.
예를 들어 https://www.youtube.com/watch?v=Pgfbl_o9WvM에서 확인할 수 있는 YouTube 동영상 '첫 번째 스크립트 - Apps Script 튜토리얼'을 삽입하려면 DevSite 페이지에 다음 <devsite-video> 맞춤 요소를 추가합니다.
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
그런 다음 class 속성이 아래 값 중 하나로 설정된 <div> 요소로 <devsite-video> 맞춤 요소를 래핑합니다.
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
기본값
다음 예는 <devsite-video>가 class 속성이 video-wrapper로 설정된 <div> 요소로 래핑될 때 삽입된 YouTube 동영상이 표시되는 방식을 보여줍니다.
대형 화면에서는 동영상이 콘텐츠 영역 너비의 50% 를 차지하며 동영상 앞에 있는 콘텐츠의 오른쪽에 플로팅됩니다. 작은 화면에서는 동영상이 콘텐츠 영역 너비의 100% 를 차지합니다.
코드
<div class="video-wrapper">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
데모
왼쪽에 플로팅
다음 예는 <devsite-video>가 클래스 속성이 video-wrapper-left로 설정된 <div> 요소로 래핑될 때 삽입된 YouTube 동영상이 표시되는 방식을 보여줍니다.
대형 화면에서는 동영상이 콘텐츠 영역 너비의 50% 를 차지하며 동영상 앞에 있는 콘텐츠의 왼쪽에 플로팅됩니다. 작은 화면에서는 동영상이 콘텐츠 영역 너비의 100% 를 차지합니다.
코드
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
데모
전체 너비
다음 예는 <devsite-video>가 class 속성이 video-wrapper-full-width로 설정된 <div> 요소로 래핑될 때 삽입된 YouTube 동영상이 표시되는 방식을 보여줍니다.
동영상이 콘텐츠 영역의 너비를 100% 차지하며 동영상 앞에 있는 콘텐츠의 레이아웃에는 영향을 미치지 않습니다.
코드
<div class="video-wrapper-full-width">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
데모
참고
모든 코드 예에서는 Google 애널리틱스 데이터를 자동으로 추적하는 DevSite의 YouTube 위젯 삽입을 사용합니다. 삽입된 동영상의 사용 통계를 수집하지 않는 특별한 경우를 제외하고 이 위젯을 사용하세요. 이 ID가 없으면 동영상의 사용 통계가 애널리틱스로 전송되지 않습니다.