Som jag beskrev på html5 har du nu flera möjligheter att använda video på sidan. Visste du att den även används för att skapa videobakgrunder? Även denna kod är ganska enkel.
Koden ser ut så här:
<video autoplay muted loop id="minVideo">
<source src="bilder/gbgvarvet2017.mp4" type="video/mp4">
</video>
Här har jag använt en snutt jag filmade på Göteborgsvarvet 2017. Jag har sedan laddat upp den på servern. Du ser mp4 filen efter source src. Jag vill även lägga till lite text på sidan samt länkar och för att göra det behöver jag lägga lite style kod i headern samt en div ovanpå. Du ser en id här som heter "minVideo".
Jag ger Div en class som heter "content"
<div class="content">
<h1>Lite nyheter från Göteborgsvarvet</h1>
<p>Detta år var det, som vanligt, väldigt många deltagare. Här var även väldigt mycket åskådare. Såg ut som om alla som sprang drog med sig familjen ut för att heja på dem.</p>
<p><a href="animering.php">Animering</a> <a href="redigera-bilder-gratis-online.php">Redigera bilder gratis online</a> <a href="https://webbgbg.se/">Webbhotell för användaren</a></p>
</div>
I denna div har jag lagt lite text samt några länkar. För att nu få denna ruta på plats använder jag en style för content och för att sprida hela mp4 över bakgrunden(#minVideo) som ser ut så här.
<style>
/* ID för att få videon över hela bakgrunden */
#minVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
/* Lägg till lite text i botten av sidan */
.content {
position: fixed;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 20px;
}
</style>
Jag lägger även in <meta name="viewport" content="width=device-width, initial-scale=1"> ovanför style taggen för att sidan och texten skall anpassa sig till mobilens fönster.
Så här ser resultatet ut>>>(öppnar i ett nytt fönster)