Ievietojiet atsaucīgus videoklipus viegli ar SuperEmbed.js

Mūsdienu internets ir pilnībā reaģē un arvien vairāk dizaineru to saprot katru dienu. Bet ir viens nepatīkams izaicinājums attiecībā uz atsaucīgu dizainu: iegulto saturu.

Katrai video vietnei no YouTube uz Vimeo ir noklusējuma iegulšanas kods fiksēts noteiktā izmērā. Tas nozīmē, ka izstrādātājiem ir jāizmanto citi risinājumi izveidojiet pilnībā atsaucīgus videoklipus.

Tomēr, tā vietā, lai izmantotu CSS konteineru klasi, varat izmantot SuperEmbed.js, bezmaksas JavaScript bibliotēka veidojot atsaucīgus videoklipus.

Šis spraudnis atrisina divas problēmas uzreiz. Visi iegultie video būs stiept, lai aizpildītu galveno konteineru, pietiekami elastīgi mainīt izmērus, pamatojoties uz pārlūka logu.

Labākā daļa ir tā, ka SuperEmbed.js nav nepieciešams papildu kods, lai jūs varētu vienkārši iegult failus un ļaujiet viņiem darboties. Šī JS bibliotēka rūpējas par pārējo mērķauditorijas atlase no atsevišķām vietnēm.

Visi videoklipi saglabātu to īpatnējās proporcijas, tāpēc jums nav jāuztraucas par nenovēršamiem izmēriem. Un SuperEmbed darbojas kā a vaniļas JS bibliotēka ar nav atkarību piemēram, jQuery.

Tieši tagad, SuperEmbed atbalsta 15+ video iegultus no tādām vietnēm kā YouTube, Vimeo, Kickstarter, DailyMotion, Facebook, Vid.me un Archive.org (starp daudziem citiem). Šis saraksts ir joprojām pieaug, tā gaida, ka laika gaitā tiks pievienoti vairāk video straumēšanas pakalpojumi.

Lai iegūtu šo rīku, jums ir nepieciešams lejupielādējiet bibliotēku un pievienojiet to vietnes galvenei tāpat kā:

Jūs varat lejupielādēt a pilnībā kopēt no GitHub repo, kas ietver arī spec atbalstītās video vietnes un pašreizējais pārlūka atbalsts.

Lielākoties SuperEmbed atbalsta visas mūsdienu pārlūkprogrammas no Firefox 3.5+, Chrome 4+ un Internet Explorer 9 vai jaunākām versijām.

Tā ir ļoti iespaidīga bibliotēka, ņemot vērā visu pārlūkprogrammas atbalstu un cik labi darbojas tieši no kastes. Tas ir daudz vienkāršāks risinājums nekā CSS hacks, ja jūs esat pareizi, balstoties uz JavaScript.

Tu vari atrast vairāk informācijas uz GitHub un jūs to varat redzēt dzīvot šajā vijolē.