Kuidas reageerivat YouTube’i videot veebisaidile manustada
YouTube’i videote veebisaitidele lisamine on tänapäeval tavaline. YouTube pakub video veebisaitidele manustamiseks iframe-koodi. Selle iframe-koodi kaudu renderdatud video ei reageeri. See tähendab, et väikestes seadmetes, näiteks mobiilseadmetes, tahvelarvutites, ei pruugi teie video kena välja näha.
Tegelikult peavad teie manustatud YouTube’i videod parema kasutuskogemuse saamiseks reageerima. Selles artiklis uurime, kuidas hõlpsasti reageerivaid YouTube’i videoid oma veebisaidile kinnistada.
Leidsin 3 võimalikku viisi meie lõpptulemuse saavutamiseks. Vaatame seda ükshaaval.
Manustage tundlik YouTube’i video Bootstrapi abil
Bootstrap on kõige populaarsem esiosa tööriist, mis aitab arendada tundlikke saite. See pakub ka lihtsat lahendust, kuidas muuta teie YouTube’i video tundlikuks.
Alustamiseks peate kõigepealt lisama Bootstrapi CSS-faili järgmiselt. Kui kasutate oma projektis juba Bootstrapi, jätke see samm vahele.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />Järgmisena kasutage oma video kinnistamiseks Bootstrapi abil järgmist HTML-i.
<div class="container">
<div class="embed-responsive embed-responsive-16by9">
<iframe src="https://www.youtube.com/embed/VIDEO_ID?rel=0"></iframe>
</div>
</div>Asendage kohatäide VIDEO_ID tegeliku video ID-ga. Proovige ja peaksite nägema, et teie video töötab väiksemates seadmetes hästi.
Selle kinnistamismeetodi kohta võite lugeda Bootstrapi dokumentatsioonist.
Tundlik YouTube’i video, kasutades Fancyboxi
See valik on natuke erinev. Siin kuvame video otse kuvamise asemel YouTube’i video pisipildi. Seejärel klõpsates pisipildil, hakatakse teie videot hüpikaknas esitama. Seda saab teha fancyboxi abil.
Fancyboxi kasutamiseks peate oma veebisaidile lisama järgmised CSS- ja JS-failid.
<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>Pärast seda asetage kood allpool ja olete 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’i manused
Esimeses meetodis oleme kasutanud iframe-koodi. Iframe’i kasutamise ajal peab brauser video renderdamiseks alla laadima ligi 800kB andmeid.
Fancyboxi abil saate seda koormust vähendada. Kuid jällegi peate kaasama nende CSS ja JS. Nende failide lisamine CDN-i kaudu on soovitatav serveri koormuse vabastamiseks.
Selle teema kallal töötades jõudsin artiklini, mis selgitab YouTube’i videote kinnistamist erineval viisil. See ei pea lehe laadimisel kasutama iframe’i ega sisaldama faile.
Artiklis on kood, mille igaüks saab hõlpsalt oma rakendusse lisada. Järgige artiklit Lite YouTube Embeds ja lisage soovitatud kood.
Need on 3 võimalikku viisi reageeriva YouTube’i video manustamiseks. Sõltuvalt teie nõudmistest saate valida mis tahes lahendused.