Wie richtet man den Inhalt eines Banners aus, wenn ein HTML5-Video vorhanden ist?

Question

Ich muss diesen Beitrag vielleicht noch einmal titulieren. Ich habe ein HTML5-Video, aber es fällt mir sehr schwer, es so zu gestalten, wie ich es möchte.

HTML

<header> 
     <div class="video-holder full-img"> 
      <video autoplay loop muted> 
       <source src="<?php bloginfo('template_url'); ?>/img/syau.webm" type="video/webm"> 
       <source src="<?php bloginfo('template_url'); ?>/img/syau.mp4" type="video/mp4"> 
      </video> 
     </div> 
     <div class="container" style="height:100%"> 
      <div class="row" style="height:100%"> 

       <div class="banner-text col-sm-12 col-md-6 col-md-offset-2"> 
        <h1>Step<br>Your<br><span id="type-selector" class="typed-element"></span><br>Up</h1> 
       </div> 
       <div class="btn-container col-md-2"> 
        <div class="btn-cta"> 
         <a class="btn btn-primary btn-lg" href="/roster/">Check us out</a> 
        </div> 
       </div> 

      </div> 
     </div> 
    </header> 

Dies ist, wie ich HTML5-Video mache. Ich habe Javascript, um die Höhe des Geräts zu erhalten, damit das Banner immer zu ihm passt.

Javascript

function windowResizeFunctions(e) { 

     var windowH = $(window).height(), 
      headerH = $('#my-navbar').height(); 

     $('header').css('height', windowH); 

    } 

    $(window).resize(function(){ 
     window.requestAnimationFrame(windowResizeFunctions); 
    }); 

    setTimeout(function() { windowResizeFunctions(); 
    }); 

Das ist mein CSS

header { 
    position: relative; 
    overflow: hidden; 
    width:100%; 
    height:100vh; 
} 
.banner-text { 
    position: relative; 
    z-index: 200; 
    text-align: left; 
    display: table; 
    float: left; 
    height: 100%; 
} 
.banner-text h1 { 
    display: table-cell; 
    vertical-align: middle; 
} 
.btn-container { 
    z-index: 201; 
    height: 100%; 
    display: table; 
} 
.btn-cta { 
    display: table-cell; 
    vertical-align: bottom; 
    padding-bottom: 90px; 
} 

.video-holder { 
    position:absolute; 
    height:100%; 
    width:200%; 
    left:-50%; 
} 
video { 
    position:absolute; 
    top: -99999px; 
    bottom: -99999px; 
    left: -99999px; 
    right: -99999px; 
    margin: auto; 
    min-height:100%; 
    min-width:50%; 
} 

Nun, das ist meine echte Live example ist. Auf dem Laptop sieht das so aus, wie ich es will, aber bei allem anderen ist es sehr schwer damit zu arbeiten. Was ich versuche zu erreichen, ist der Banner-Text auf der linken Seite, und der Knopf auf der unteren rechten Seite des Containers, so dass es mit der Grundlinie des letzten Wortes eingeebnet ist.

Ich dachte, Flexbox zu tun. Ich habe versucht, .rowdisplay:flex und .banner-textalign-items:center; geben, aber das würde nicht funktionieren. Ich habe verschiedene HTML-Änderungen ausprobiert, um die Dinge zu verschieben und ich konnte es nicht erreichen. Ich würde meine Versuche posten, aber diese Frage würde massiv werden.

Ich möchte nur wie this auf Laptop/Desktop aussehen. Auf Tablet und Handy möchte ich nur stapeln, Text oben und Button unten. Das ist furchtbar verschlüsselt und ich bin mir nicht sicher, wie ich das richtig machen soll.

Answer 1

Setzen Sie den <a> Knopf innerhalb des <h1> Etiketts - als das letzte Element.

Erhöhen Sie die Breite des Tags <h1>, indem Sie die übergeordnete Klasse von col-md-6 in col-md-8 ändern.

Stellen Sie die folgenden CSS auf die Schaltfläche:

float:right; 
position:relative; 
top:40px; 

Es ist ein wenig hacky und es gibt auf jeden Fall bessere Lösungen gibt, aber das würde den gesamten DOM erfordert Umstrukturierung. Dies ist die einfachste Lösung.