Voit upottaa YouTube-videoita suoraan DevSite-sivuille käyttämällä mukautettua elementtiä <devsite-video> . Kaikki videot ovat responsiivisia ja säilyttävät 16:9-suhteen katseluportin leveyden muuttuessa.
Jos haluat upottaa YouTube-videon, lisää sivullesi mukautettu <devsite-video> -elementti ja aseta video-id -attribuutti videon v URL-parametrin arvoksi.
Jos esimerkiksi haluat upottaa YouTube-videon "Your First Script - Apps Script Tutorials", jonka löydät osoitteesta https://www.youtube.com/watch?v=Pgfbl_o9WvM , lisää seuraava <devsite-video> mukautettu elementti Kehittäjäsivuston sivu:
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
Kääri sitten mukautettu <devsite-video> -elementti <div> -elementtiin, jonka class attribuutti on asetettu johonkin alla olevista arvoista:
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
Oletus
Seuraava esimerkki näyttää, kuinka upotettu YouTube-video näytetään, kun <devsite-video> on kääritty <div> -elementtiin, jonka class attribuutiksi on asetettu video-wrapper .
Suurilla näytöillä video on 50 % sisältöalueen leveydestä ja kelluu minkä tahansa videon edeltävän sisällön oikealla puolella. Pienillä näytöillä video on 100 % sisältöalueen leveydestä.
Koodi
<div class="video-wrapper">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Kelluu vasemmalle
Seuraava esimerkki näyttää, kuinka upotettu YouTube-video näytetään, kun <devsite-video> on kääritty <div> -elementtiin, jonka luokkaattribuutiksi on asetettu video-wrapper-left .
Suurilla näytöillä video on 50 % sisältöalueen leveydestä ja kelluu minkä tahansa videon edeltävän sisällön vasemmalla puolella. Pienillä näytöillä video on 100 % sisältöalueen leveydestä.
Koodi
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Täysleveä
Seuraava esimerkki näyttää, kuinka upotettu YouTube-video näytetään, kun <devsite-video> on kääritty <div> -elementtiin, jonka class on asetettu video-wrapper-full-width .
Video on 100 % sisältöalueen leveydestä, eikä se vaikuta videon edeltävän sisällön asetteluun.
Koodi
<div class="video-wrapper-full-width">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Huomautuksia
Kaikki koodiesimerkit käyttävät DevSiten Embed YouTube -widgetiä , joka seuraa Google Analytics -tietoja automaattisesti. Käytä tätä widgetiä paitsi erikoistapauksissa, joissa et halua kerätä käyttötilastoja upotetusta videosta. Ilman sitä videosi käyttötilastoja ei lähetetä Analyticsiin.