Reagoivan YouTube-videon upottaminen verkkosivustoon
YouTube-videoiden sijoittaminen verkkosivustoille on nykyään yleistä. YouTube tarjoaa iframe-koodin videon upottamiseksi verkkosivustoille. Tämän iframe-koodin kautta renderoitu video ei kuitenkaan reagoi. Se tarkoittaa, että pienissä laitteissa, kuten mobiililaitteissa, tablet-laitteissa, video ei ehkä näytä hyvältä.
Itse asiassa upotettujen YouTube-videoidesi on oltava reagoivia parempaan käyttökokemukseen. Tässä artikkelissa tutkitaan, miten responsiiviset YouTube-videot upotetaan verkkosivustoosi.
Löysin 3 mahdollista tapaa saavuttaa lopputuloksemme. Katsotaanpa se yksi kerrallaan.
Upota reagoiva YouTube-video Bootstrapilla
Bootstrap on suosituin käyttöliittymä, joka auttaa kehittämään reagoivia sivustoja. Se tarjoaa myös helpon ratkaisun tehdä YouTube-videostasi reagoiva.
Aloittamiseksi sinun on ensin sisällytettävä Bootstrapin CSS-tiedosto seuraavasti. Jos käytät jo Bootstrapia projektissasi, ohita tämä vaihe.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />Seuraavaksi käytä seuraavaa HTML-koodia videosi upottamiseen Bootstrapilla.
<div class="container">
<div class="embed-responsive embed-responsive-16by9">
<iframe src="https://www.youtube.com/embed/VIDEO_ID?rel=0"></iframe>
</div>
</div>Korvaa paikkamerkki VIDEO_ID todellisella videotunnuksella. Kokeile ja sinun pitäisi nähdä videosi toimivan hyvin pienemmissä laitteissa.
Voit lukea tästä upotustavasta Bootstrap-dokumentaatiosta.
Reagoiva YouTube-video Fancyboxin avulla
Tämä vaihtoehto on hieman erilainen. Tässä sen sijaan, että näytämme videota suoraan, näytämme pikkukuvan YouTube-videosta. Ja sitten napsauttamalla pikkukuvaa, videosi alkaa toistaa ponnahdusikkunassa. Tämä voidaan tehdä käyttämällä fancyboxia.
Fancyboxin käyttämiseksi sinun on lisättävä verkkosivustollesi seuraavat CSS- ja JS-tiedostot.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>Tämän jälkeen, aseta koodi alla ja olet valmis.
<a data-fancybox="" href="https://www.youtube.com/watch?v=VIDEO_ID">
<img src="http://i3.ytimg.com/vi/VIDEO_ID/hqdefault.jpg" />
</a>Lite YouTube Embeds
Ensimmäisessä menetelmässä olemme käyttäneet iframe-koodia. Kun iframe-kehys on käytössä, selaimen on ladattava lähes 800 kt dataa videon renderoimiseksi.
Fancyboxin avulla voit vähentää tätä kuormaa. Mutta jälleen sinun on sisällytettävä heidän CSS ja JS. Näiden tiedostojen lisääminen CDN: n kautta on suositeltavaa palvelimen kuormituksen vapauttamiseksi.
Työskennellessäni tämän aiheen kanssa törmäsin artikkeliin, jossa selitetään YouTube-videoiden upottaminen eri tavalla. Sen ei tarvitse käyttää iframe-kehystä sivulatauksessa, eikä sen tarvitse sisältää tiedostoja.
Artikkelissa on koodi, jonka kuka tahansa voi helposti lisätä sovellukseensa. Seuraa Lite YouTube Embeds -artikkelia ja lisää koodi ehdotetulla tavalla.
Nämä ovat kolme mahdollista tapaa upottaa reagoiva YouTube-video. Vaatimusten mukaan voit valita minkä tahansa ratkaisun.