Responsiivisen videon upottaminen Moodleen

Moodleen ohjeistetaan usein upottamaan videoita iframe-upotuskoodilla. Upotuskoodin pystyy yleensä luomaan videoalustalla. Jos videoita katsotaan eri laitteilla, ongelmaksi voi muodostua se, että upotuskoodiin on usein määritelty kiinteät width- ja height-määreet, joten ne eivät käyttäydy responsiivisesti niille videoille varattun tilan mukaisesti. Vimeossa ongelman voi välttää valitsemalla upotuskoodia tehtäessä responsive-asetuksen, mutta esimerkiksi Youtubessa vastaavaa asetusta ei kirjoitushetkellä ole. Alla olevasta Youtuben upotuskoodista on lihavoitu width- ja height-määreet, joiden mukaisesti video on 560 pikseliä leveä ja 315 pikseliä korkea.

<iframe width="560" height="315" src="https://www.youtube.com/embed/fWjJtivcKIk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Jos Moodlessa käytetään Bootstrap-kirjastoa hyödyntävää teemaa, esimerkiksi Moodlen oletusteemaa Boostia, yksi idea  ongelman ratkaisemiseksi löytyy 3rd Wave Median blogikirjoituksessa, jossa käytetään Bootsrap-kirjaston upotus-ominaisuuksia. Bootsrap 4 on ollut käytössä Boostissa versiosta 3.2 lähtien.

Koska kaikki Moodlen käyttäjät eivät ole tutustuneet html-kieleen, pyrin helpottamaan upotuskoodin muuttamista alla olevalla lomakkeella.

Liitä Youtuben upotuskoodisi alla olevaan kenttään ja klikkaa kentän alapuolella olevaa painiketta.

Alla olevaan kenttään tulee klikkauksen jälkeen responsiivinen upotuskoodi, jonka voit valita ja kopioida Moodleen. Upotuskoodi pitäisi toimia, jos Moodlen teemassa on käytössä Bootsrap-kirjasto.

Lomakkeeseen ei ole lisätty kuin alkeellinen syntaksin tarkistus, joten koodin toimivuus kannattaa tarkistaa itse.

Videon upottaminen alusta loppuun

Idea on yksinkertainen. Ensin luodaan videopalvelussa upotuskoodi. Sen jälkeen upotuskoodi sijoitetaan div-elementin sisään ja sille määritellään Bootsrapin embed-responsive-item-luokka. Lopuksi upotuskoodi kopioidaan ja liitetään Moodleen. Voit kokeilla videon upottamista vaikkapa Moodle sandbox demo-sivustolla.

Upotuskoodin luominen

Youtubessa upotuskoodi luodaan klikkaamalla ensi Jaa-painiketta videon alapuolelta.

Youtube-videon voi jakaa videon alapuolella olevasta Jaa-painikkeesta.

Valitse sen jälkeen upota.

Upota-valinta löytyy luettelossa ensimmäisenä vasemmalla.

Kopioi upotuskoodi klikkaamalla seuraavasta ikkunasta Kopioi-painiketta.

Upotuskoodin muokkaaminen

Sen jälkeen upotuskoodi tulee sijoittaa div-elementin <div class=”embed-responsive embed-responsive-16by9″></div> sisään alla olevan esimerkin mukaisesti.

<div class="embed-responsive embed-responsive-16by9">

<!-- Tälle riville tulee videosi upotuskoodi -->

</div>

On tärkeää, että elementille määritellään luokka ”embed-responsive embed-responsive-16by9”, koska siitä Bootsrap tunnistaa upotettavan elementin. Esimerkissä käytän 16:9, muita suhteita varten on omat luokat https://getbootstrap.com/docs/4.0/utilities/embed/

Kolmanneksi upotuskoodin iframe-elementille määritellään luokka lisäämälle siihen määre class=”embed-responsive-item”.

Edellä mainitut muokkaukset voit tehdä tämän sivun alusta löytyvällä lomakkeella, joten html-koodia ei tätä varten ole pakko hallita. Toki on aina hyvä ymmärtää myös koodin periaatteet.

Videon upottaminen Moodleen

Kun olet kopioinut koodin, voit avata kurssisi ja luoda sinne vaikkapa Ohjeteksti-aktiviteetin (englanniksi Label). Klikkaa ensin kurssillasi Lisää aktiviteetti tai aineisto-painiketta.

Valitse Ohjeteksti.

Klikkaa editorin kaikki toiminnot näkyviin

Klikkaa HTML-editori auki.

Liitä upotuskoodi editoriin.

Klikkaa Tallenna ja palaa kurssille. Video näkyy nyt kurssisivullasi.

Jaa kirjoitus muille

Jätä kommentti