Skip to content

Kõik WordPressist, veebiarendusest — ja mitte ainult

Kerge fassaad YouTube’i ja Vimeo jaoks

Kerge YouTube'i ja Vimeo lisamine: fassaadigeneraator

Kleebi videote lingid ja saad valmis ploki, mis näitab eelvaadet ning laadib mängija alles pärast klõpsu. Null välist teeki: kõik vajalik on loodud koodi sees.

Üks rea kohta. YouTube: watch?v=, youtu.be, /embed/, /shorts/, youtube-nocookie.com. Vimeo: vimeo.com/ID, player.vimeo.com/video/ID, privaatsed vimeo.com/ID/HASH. Ajatempel ?t= / &start= kantakse fassaadile üle. Valikulised täpsustused püstkriipsu järel: URL | Pealkiri | Pisipildi URL.
hqdefault on olemas iga video jaoks. maxresdefault on ainult seal, kus originaal laaditi üles 720p või kõrgemas kvaliteedis — muidu pilt lihtsalt ei avane ja vaataja näeb tühja ristkülikut.
Ühine kõigile videotele. Real kriipsu järel olev pealkiri on ülimuslik. Allkiri läheb ka nupu aria-label'isse ja iframe'i title'isse.
Vimeol pole ettearvatavat kaadri aadressi nagu YouTube'i i.ytimg.com: selle tagastab ainult oEmbed API ja meie sinna päringut teha ei saa — tööriist töötab võrguta. Seega lae kaader saidi meediakogusse ja kleebi link. Ilma selleta on gradiendiga kohatäide play-nupuga.
Loodud ploki käitumine
Fassaadi nägemiseks kleebi vähemalt üks link.

Kood pannakse kokku sinu brauseris. Ei loodud plokk ega eelvaade ise tee ühtegi välist päringut — pildid aadressilt i.ytimg.com on eelvaates näidatud aadressidena, mitte alla laaditud.

Üksainus manustatud video maksab üle megabaidi juba enne esimest klõpsu

Tavaline YouTube'i iframe laadib umbes 1,3 MB paarikümne päringuga seitsmele võõrale domeenile — juba enne, kui külastaja on otsustanud videot vaadata. Kolme videoga lehel on seda kolm korda rohkem ja peaaegu alati just see rikub mobiilse kiiruse näitajad. Fassaad lahendab probleemi otse: kõigepealt näidatakse ainult eelvaatepilti taasesitusnupuga ja päris mängija lisatakse alles klõpsu hetkel. Enne klõpsu kaalub leht suurusjärgu võrra vähem. Selle jaoks on olemas populaarne teek, kuid kõik juhendid soovitavad seda laadida võõrast CDN-ist — see tähendab ühe välise päringu eemaldamist ja teise lisamist. Siin on genereeritud kood täiesti iseseisev: stiilid ja skript asuvad ploki sees. Lisamõju puudutab privaatsust. Tavaline iframe seab jälgimisküpsised juba enne vaatamist. Domeen youtube-nocookie.com lükkab selle taasesituse alguseni ja fassaad klõpsuni. Euroopa publikule suunatud saitide puhul puudutab see otseselt küpsisenõusoleku nõudeid.

Korduma kippuvad küsimused