CSS - centrera video och fyll höjdleds
Privet Swec!
Det är så att jag sitter och knåpar på ett projekt till hemsida. Tidigare har jag framförallt jobbat med wordpress men det här projektet krävde kod från grunden vilket gjort att jag fått sätta mig in i dreamweaver och css/html, på en mycket låg nivå men projektet borde vara väldigt simpelt, ändå lyckas jag inte för mitt liv.
Webbsidan ska enbart bestå av en video som jag har ett tidigt utkast på, nästa steg är ett par knappar över men det får bli nästa problem. Det jag vill är att videon ska fylla enheten på höjden och centreras i sidled, resten får gärna cropas bort i sididled men att höjden anpassas så den alltid fyller hela skärmen, helst utan möjlighet att man ska kunna skrolla något utan att videon fyller hela fönstret. Och att detta görs oavsett enhet, på desktop syns alltså sidorna på videon medan det på mobil enbart är mitten som syns men att hela höjden syns i båda fall. Kanske är det någon typ av bakgrundsvideo jag är ute efter.
För att förtydliga, bilder på ungefär hur jag vill att det ska se ut:
Men som ni kan se på hemsidan tar den ingen som helst hänsyn till enheten den visas i:
klubbsputnik.se
Har provat massa olika CSS-lösningar men just nu har jag:
HTML:
<!doctype html>
<html lang="en-US">
<link href="css sputnik.css" rel="stylesheet" type="text/css">
<video autoplay muted loop id="video">
<source src="http://klubbsputnik.se/Media/sputnik_ani.mp4" type="video/mp4">
</video>
</html>
CSS:
#video {
position: relative;
right: 0;
bottom: 0;
min-width: 50%;
min-height: 50%;
}
Mycket tacksam för alla tankar!
Det finns ingen dålig hårdvara, bara dåliga portar
