• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Video centern

Scopii

Neues Mitglied
Hallo ... ich möchte ein Video zentrieren aber mit den Standard-Funktionen funktioniert das nicht sorichtig. Das Video an sich ist kleiner als das Fenster und ich habe folgenden Code benutzt:

<html>
<head>
<title> KnifeWarrior Fanpage </title>
</head>

<style>

body, html {margin:0;}
.backgroundvideo {position:fixed;-webkit-filter: contrast(1); -webkit-filter: brightness(1); height:1000px}
.backgroundpic {position:fixed;-webkit-filter: contrast(1); -webkit-filter: brightness(1);}
</style>


<div class="backgroundpic">
<body background="GitterBIG.png">
</div>

<div class="backgroundvideo">

<video autoplay loop poster="" id="bgvid" preload="auto" autoplay="true" muted="true" height="607.5" width="1080" center="true">

<source src="LogoVideo.mp4" type="video/mp4">
</video>
</div>

</body>
</html>
 
Werbung:
Ein Video-Element kann genau wie ein Blockelement zentriert werden. Siehe:
https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Inhalte_zentrieren#margin:_auto

Moderation: Verschoben von HTML zu CSS, da es um Gestaltung geht.

Er möchte aber eine fixe Position erreichen und keine Relative

Für fixe Horizontale Zentrierung:

Code:
.horizontal { position: fixed; left: 50%; transform: translateX(-50%); }

Für fixe Vertikale Zentrierung:

Code:
.vertical { position: fixed; top: 50%; transform: translateY(-50%); }

Für fixe Vertikale und Horizontale Zentrierung:

Code:
.vertical-horizontal { position: fixed: left: 50%; top: 50%; transform: translate(-50%, -50%); }

Danach kannst du mittel calc() ausgehend von der zentrierten Position abweichen

Code:
top: calc(50% - 100px);
 
Werbung:
Zurück
Oben