Kotisivu » Web-suunnittelu » Upota reagoivat videot helposti SuperEmbed.js n avulla

    Upota reagoivat videot helposti SuperEmbed.js n avulla

    Moderni web on täysin reagoiva ja enemmän suunnittelijoita ymmärtää tämän joka päivä. Mutta siellä on yksi ärsyttävä haaste, kun kyseessä on herkkä muotoilu: upotettu sisältö.

    Jokaisella YouTubesta Vimeolle tulevalla videopaikalla on a oletuskoodin kiinnitetty tiettyyn kokoon. Tämä tarkoittaa, että kehittäjien on käytettävä muita ratkaisuja luo täysin reagoivia videoita.

    Sen sijaan, että käytät CSS-konttiluokkaa, voit käyttää sitä SuperEmbed.js, ilmainen JavaScript-kirjasto luotettavien videoiden luominen.

    Tämä plugin ratkaisee kaksi ongelmaa heti. Kaikki sulautetut videot tulevat venyttää täyttämään pääsäiliön, samalla myös riittävän joustava kokoa perustuu selainikkunaan.

    Parasta on, että SuperEmbed.js ei vaadi ylimääräistä koodia, niin voit vain upota tiedostot ja anna heidän juosta. Tämä JS-kirjasto hoitaa loput kohdennettujen elementtien kohdentaminen tietyiltä sivustoilta.

    Kaikki videot säilyttää niiden erityiset kuvasuhteet, joten sinun ei tarvitse huolehtia surkeasta ulottuvuudesta. Ja SuperEmbed toimii vanilja JS-kirjasto kanssa ei ole riippuvuuksia kuten jQuery.

    Juuri nyt, SuperEmbed tukee 15 + videokuvaa sivustoista, kuten YouTube, Vimeo, Kickstarter, DailyMotion, Facebook, Vid.me ja Archive.org (monien muiden joukossa). Tämä luettelo on kasvaa yhä, odottaa siis lisää videon suoratoistopalveluja ajan myötä.

    Jotta tämä työkalu toimisi, sinun tarvitsee vain Lataa kirjasto ja lisää se sivustosi otsikkoon niin kuin:

      

    Voit ladata a kopioida GitHub-reposta, joka sisältää myös tiedot tuetut video-sivustot ja nykyinen selaimen tuki.

    Useimmiten SuperEmbed tukee kaikkia nykyaikaisia ​​selaimia Firefox 3.5+, Chrome 4+ ja Internet Explorer 9: n tai uudemman version versiot.

    Tämä on erittäin vaikuttava kirjasto, jossa otetaan huomioon kaikki selaimen tuki ja kuinka hyvin se on toimii suoraan laatikosta. Se on paljon yksinkertaisempi ratkaisu kuin CSS hacks, jos olet kunnossa tukeutuen JavaScriptiin.

    Voit löytää lisää tietoa GitHubissa ja näet sen elää käynnissä tässä viulussa.