YouTube videon upotus

Teoria

• Iframella voidaan upottaa sisältöä nettisivulle toisesta palvelusta
• Upotettu elementti voi olla esim. video, kartta tai vaikka musiikkisoitin
• Iframe voi sisältää myös kokonaisen nettivisun, jolloin se on kuin ikkuna toiselle sivulle

Tehtävä 1 - Testaa upotusta

• Tee kansioon demos/d8 tiedosto test.html
• Lisää test.html tiedostoon sivupohja (Boilerplate) tuttuun tapaan ! + Tab
• Seuraa case-esimerkkejä alla

Case 1: Yksi iframe upotus

• Jos sivulle ei tule montaa upotettua videota, niin voit käyttää tavallista YouTuben tarjoamaa iframe-upotuskoodia
• Lisää sivulle haluamasi video upotuskoodilla
• Klikkaa videon alta Jaa, sitten Upota ja kopioi iframe-koodi nettisivullesi
• Linkki esimerkin videoon: https://www.youtube.com/watch?v=qz0aGYrrlhU

Case 2: Useita iframe upotuksia

• Kokeile lisätä sivulle peräkkäin useita iframe-upotuksia (esim. 10-30)
• Hidastuuko sivun lataus?

• Voit tarkastella sivuston latautumista selaimen kehittäjä-työkalujen Network-välilehdellä
• Paina tyhjässä kohtaa sivua oikealla hiiren näppäimellä ja valitse Tarkista/Inspect
• Valitse Netwotk-välilehti
• Päivitä sivu tai paina Ctrl + R
• Selaa kohtaan, jossa on YouTube-videon toistotunnuksella tehtyjä GET-requesteja
• Montako millisekuntia video-upotteen lataus kestää?

• Usean videon tapauksessa voidaan käyttää kikkaa, jossa ladataan iframen sijaan pelkästään videon thumbnail-kuvat:
• Lite YouTube Embeds by @labnol

Tehtävä 2 - Usean sivun kokonaisuus

• Jätetään test.html rauhaan
• Lisää uusi tiedosto index.html ja lisää HTML-Boilerplate (! + Tab)
• Lisää style.css ja linkitä se headiin

• Lisää index.html sivulle navigaatio (nav), jonka sisällä on svg-logo (yllä) ja 3 tekstilinkkiä
• Jos teit koodausaiheisen sivuston, niin linkit voivat olla (HTML, Python, JavaScript)
• Tee navigaatioon linkit muihin tiedostoihin (jotka luot kohta) <ul> <li><a href="index.html">HTML</a></li> <li><a href="py-tutorial.html">Python</a></li> <li><a href="js-tutorial.html">JavaScript</a></li> </ul>

• Tee kopio index.html tiedostosta ja nimeä se aiheeseen sopivasti (esim. py-tutorial.html)
• Tee toinen kopio ja nimeä sekin aiheeseen sopivasti (esim. js-tutorial.html)
• Vaihdan kunkin sivun iframeen aiheeseen sopiva video

• Tee sivun taustasta tumma ja laita linkeille näkyvä väri
• Poista linkkien alleviivaus CSS:llänav a, nav a:visited{ text-decoration: none; }
• Tee CSS-class nimeltä "active", joka palauttaa linkin alleviivauksen (text-decoration: underline;)
• Lisää "active"-class, index.html-sivulle navigaation linkkiin, jossa lukee HTML
<li><a href="index.html" class="active">HTML</a></li>
• Lisää "active"-class, py-tutorial.html-sivulle navigaation linkkiin, jossa lukee Python
• Lisää "active"-class, js-tutorial.html-sivulle navigaation linkkiin, jossa lukee JavaScript
• Activen tarkoitus on kertoa käyttäjälle, millä sivulla hän on parhaillaan

Kansiorakenne

Layout

Mallit

index.html

py-tutorial.html

js-tutorial.html

Responsiivinen videon upottaminen

Onneksi joku on löytänyt ratkaisun YouTube videon upottamiseen siten, että videon koko skaalautuu automaattisesti ruudun leveyden ja korkeuden mukaan.