Använd video på dina sidor

Innan HTML5 var man tungen att använda sig av någon slags videospelare om man ville visa video på sin hemsida. Men nu har vi tillgång till betydligt smidigare metoder. Nu kan vi göra såhär:

<video src="videos/basta_filmen.mp4" controls>
  Du har en för gammal webbläsare för att kunna se denna film
</video>

Eller rent av såhär:

<video src="videos/basta_filmen.mp4" controls></video>

Det format som fungerar bäst är formatet `mp4`, alltså filmer komprimerade med`H.264`. Ett annat sätt att göra samma sak, är att använda `.ogg` medan man har `mp4` som backup är att göra såhär:

<video controls>
  <source src="videos/basta_filmen.ogg" type="video/ogg">
  <source src="videos/basta_filmen.mp4" type="video/mp4">
  Du har en för gammal webbläsare för att kunna se denna film
</video>

I denna uppgift ska du få prova några olika sätt att lägga till videor på dina sidor.

Ladda ner denna zip-fil

Länka till stilmallen `style.css` i `index.html`
Gör en topplista över dina fem roligaste klipp. Skriv gärna en motivering till varför du tycker att videon är rolig också.
Minst ett av klippen i mappen `videos/` måste vara med på listan
Minst ett klipp måste du lägga till ifrån YouTube. Hur du gör det kan du läsa om här: https://support.google.com/youtube/answer/171780?hl=sv
Minst ett klipp måste du lägga till ifrån Vimeo. Hur du gör det kan du läsa om här: https://vimeo.zendesk.com/hc/en-us/articles/224969968-Embedding-videos-overview
Designa din topplista så att den blir snygg och funkar med såväl bred som smal skärm
Lämna in den på vklass
Lek vidare med din sida:
1. Testa att göra dina iframes responsiva. Mer om det kan du läsa här: https://www.w3schools.com/howto/howto_css_responsive_iframes.asp
2. Prova att lägga till en video ifrån Twitch. Hur du gör det kan du läsa här: https://dev.twitch.tv/docs/embed/video-and-clips
3. Kolla hur kan få en video att starta automatiskt: https://www.w3schools.com/html/html5_video.asp
4. Prova att göra så att filmen loopas om och om igen: https://www.w3schools.com/html/html5_video.asp
5. Försök också gärna göra filmerna svartvita: https://www.w3schools.com/cssref/css3_pr_filter.asp
6. Testa gärna också att lägga en film som bakgrund: https://www.w3schools.com/howto/howto_css_fullscreen_video.asp

Använd video på dina sidor

Genomgång

Instruktioner