<devsite-video> özel öğesini kullanarak YouTube videolarını doğrudan DevSite sayfalarına yerleştirebilirsiniz. Tüm videolar duyarlı olup görüntü alanı genişliği değiştikçe 16:9 oranını korur.
YouTube videosu yerleştirmek için sayfanıza bir <devsite-video> özel öğesi ekleyin ve video-id özelliğini videonun v URL parametresinin değerine ayarlayın.
Örneğin, https://www.youtube.com/watch?v=Pgfbl_o9WvM adresinde bulabileceğiniz "İlk Komut Dosyanız - Apps Script Eğitimleri" adlı YouTube videosunu yerleştirmek için DevSite sayfanıza aşağıdaki <devsite-video> özel öğeyi ekleyin:
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
Ardından, <devsite-video> özel öğesini, class özelliği aşağıdaki değerlerden birine ayarlanmış bir <div> öğesine sarın:
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
Varsayılan
Aşağıdaki örnekte, <devsite-video> öğesi class özelliği video-wrapper olarak ayarlanmış bir <div> öğesine sarmalandığında gömülü YouTube videosunun nasıl görüntülendiği gösterilmektedir.
Büyük ekranlarda video, içerik alanının genişliğinin% 50'sini kaplar ve videodan önce gelen içeriğin sağında yüzer. Küçük ekranlarda video, içerik alanının genişliğinin% 100'ünü kaplar.
Kod
<div class="video-wrapper">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Solda yüzen
Aşağıdaki örnekte, <devsite-video> sınıf özelliği video-wrapper-left olarak ayarlanmış bir <div> öğesine sarmalandığında katıştırılmış bir YouTube videosunun nasıl görüntülendiği gösterilmektedir.
Büyük ekranlarda video, içerik alanının genişliğinin% 50'sini kaplar ve videodan önce gelen içeriğin solunda yüzer. Küçük ekranlarda video, içerik alanının genişliğinin% 100'ünü kaplar.
Kod
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Tam genişlik
Aşağıdaki örnekte, <devsite-video> öğesi class özelliği video-wrapper-full-width olarak ayarlanmış bir <div> öğesine sarmalandığında gömülü YouTube videosunun nasıl görüntülendiği gösterilmektedir.
Video, içerik alanının genişliğinin% 100'ünü kaplar ve videodan önce gelen içeriğin düzenini etkilemez.
Kod
<div class="video-wrapper-full-width">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Notlar
Tüm kod örnekleri, Google Analytics verilerini otomatik olarak izleyen DevSite'in YouTube widget'ını kullanır. Yerleştirilmiş bir videonun kullanım istatistiklerini toplamak istemediğiniz özel durumlar dışında bu widget'ı kullanın. Bu olmadan, videonuzun kullanım istatistikleri Analytics'e gönderilmez.