Hi,
ich tue mir etwas schwer und würde mich über Hilfe freuen.
Momentan erstelle ich eine Start Seite in Wordpress. Dort soll oben ein Video (.mp4) laufen.
Darüber will ich ein Text legen.
Ich bekomme das aber responsive nicht hin.
Demo: https://www.dl2fbo.de
Auf meiner alten Seite mit Bootstrap hatte ich das hinbekommen https://test.dl2fbo.de
Jetzt ohne Bootstrap tue ich mir weh.
Alter Code
In WP habe ich folgendes CSS für den Text:
ich tue mir etwas schwer und würde mich über Hilfe freuen.
Momentan erstelle ich eine Start Seite in Wordpress. Dort soll oben ein Video (.mp4) laufen.
Darüber will ich ein Text legen.
Ich bekomme das aber responsive nicht hin.
Demo: https://www.dl2fbo.de
Auf meiner alten Seite mit Bootstrap hatte ich das hinbekommen https://test.dl2fbo.de
Jetzt ohne Bootstrap tue ich mir weh.
Alter Code
HTML-Code:
/* CSS für Video auf Startseite */ header { position: relative; background-color: black; height: 75vh; min-height: 25rem; width: 100%; overflow: hidden; } header video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: 0; -ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } header .container { position: relative; z-index: 2; } header .overlay { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: black; // opacity: 0.5; z-index: 1; } @media (pointer: coarse) and (hover: none) { header { background: url('img/antenna1280.jpg') black no-repeat center center scroll; } header video { display: none; } } </style> </head> <body> <header> <div class="overlay"/> <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop"> <source src="img/world-1992small.mp4" type="video/mp4"> </video> <div class="container h-100"> <div class="d-flex h-100 text-center align-items-center"> <div class="w-100 text-white"> <a style="font-size: 10vw; color:cyan;">Amateurfunk</a> <p class="lead mb-0" style="font-size:25px;">ein Weltum<b style="color:red;">spannendes</b> Hobby</p> </div> </div> </div> </header> </body>
HTML-Code:
.video_head{ font-size: 10vw; position:absolute; top:560px; z-index:1; height: 100%; width: 100%!important; color: white; text-align:center; }
Kommentar