1. Zuhause
  2. Frage und Antwort
  3. Set-Video-Tag als Hintergrundbild und passen den Inhalt

Set-Video-Tag als Hintergrundbild und passen den Inhalt

2017-06-08 2 views
2

Hier ist mein Code:Set-Video-Tag als Hintergrundbild und passen den Inhalt

.video-bg-container { 
    position: relative; 
    z-index: 9; 
} 

.video-bg { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    /*z-index: 9;*/ 
} 

.video-bg-boxes { 
    position: relative; 
    /*position: absolute;*/ 
    /*top: 0;*/ 
    /*left: 0;*/ 
    /*right: 0;*/ 
    /*bottom: 0;*/ 
    padding: 70px 10%; 
    z-index: 10; 
} 

.video-bg-boxes .blue-box { 
    color: #ffffff; 
    background-color: #0091cf!important; 
    padding: 30px 30px 80px 30px; 
    font-size: 16px; 
    cursor: pointer; 
    margin-bottom: 30px; 
}

Lesen Sie die komplette + Demo an: https://jsfiddle.net/lanford/aeqx6ubp/4/

ich das Video-Tag wie ein Hintergrundbild wirkt wollen mit Boden zurück Größe Abdeckung : Die Breite ist immer 100% aber die Höhe skaliert mit der Höhe des Inhaltes innen und immer ansprechend. Gibt es das überhaupt, um es durch jquery oder CSS zu erreichen?

Quelle

2017-06-08 Lee

+0

Ich denke, das besser mit einer Leinwand erreicht werden. Was denken Sie? –

+0

Ich habe keine Kenntnisse für Leinwand. – Lee

+0

Überprüfen Sie meine Antwort .. – LKG

Antwort

1

Ich denke, das könnte den Trick für Sie tun. Aber in diesem Fall wird bei großen Geräten das Video korrekt angezeigt, wobei die volle Breite des Videos sichtbar ist. und der Grund dafür ist in den meisten Fällen unser Videoelement-Seitenverhältnis, das sich von unserem Videoquellen-Seitenverhältnis unterscheidet. So haben Sie die overflow:hidden .Eine weitere Sache, die beachtet werden muss, ist das Video auf mobilen Geräten verstecken und nur ein Hintergrundbild anzeigen. Dies liegt daran, dass die meisten mobilen Plattformen HTML5-Videos nicht automatisch abspielen und sie mit einer eingebetteten Wiedergabeschaltfläche über unseren Inhalten anzeigen. Und das ist kein erwartetes Verhalten.

Breite vom Videoelement entfernen. Halten Sie position:absolute;top:0;left:0 und geben Sie overflow: hidden; zu video-bg Klasse.

.video-module { 
 
    margin-bottom: 50px; 
 
} 
 

 
.video-bg-container { 
 
    position: relative; 
 
    z-index: 9; 
 
} 
 

 
.video-bg { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    overflow: hidden; 
 
    /*z-index: 9;*/ 
 
} 
 

 
video { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
} 
 

 
.video-bg-boxes { 
 
    position: relative; 
 
    /*position: absolute;*/ 
 
    /*top: 0;*/ 
 
    /*left: 0;*/ 
 
    /*right: 0;*/ 
 
    /*bottom: 0;*/ 
 
    padding: 70px 10%; 
 
    z-index: 10; 
 
} 
 

 
.video-bg-boxes .blue-box { 
 
    color: #ffffff; 
 
    background-color: #0091cf!important; 
 
    padding: 30px 30px 80px 30px; 
 
    font-size: 16px; 
 
    cursor: pointer; 
 
    margin-bottom: 30px; 
 
} 
 

 
.video-bg-boxes .blue-box strong { 
 
    font-size: 30px; 
 
    color: #ffffff; 
 
    text-transform: uppercase; 
 
} 
 

 
.video-bg-boxes .blue-box:hover { 
 
    background-color: #E4E1E0!important; 
 
    color: #4C4145!important; 
 
} 
 

 
.video-bg-boxes .blue-box:hover strong { 
 
    color: #0091CF!important; 
 
} 
 

 
.video-bg-boxes .blue-box a { 
 
    text-decoration: none; 
 
    color: #ffffff; 
 
} 
 

 
.video-bg-boxes .blue-box:hover a { 
 
    color: #0091CF; 
 
} 
 

 
.video-bg-boxes .grey-box { 
 
    border: none!important; 
 
    padding: 30px 30px 80px 30px; 
 
    background: url("https://cdn2.hubspot.net/hubfs/3372283/axon-active/img/p1/blue-arrow-ico.png"); 
 
    background-position: center 90%; 
 
    background-repeat: no-repeat; 
 
    font-size: 16px; 
 
    cursor: pointer; 
 
    margin-bottom: 30px; 
 
    background-color: #E4E1E0; 
 
    color: #4C4145!important; 
 
} 
 

 
.video-bg-boxes .grey-box strong { 
 
    font-size: 30px; 
 
    color: #0091CF; 
 
    text-transform: uppercase; 
 
} 
 

 
.video-bg-boxes .grey-box:hover { 
 
    background: url("https://cdn2.hubspot.net/hubfs/3372283/axon-active/img/p1/arrow-ico.png")!important; 
 
    background-position: center 90%!important; 
 
    background-repeat: no-repeat!important; 
 
    background-color: #0091cf!important; 
 
    color: #ffffff!important; 
 
} 
 

 
.video-bg-boxes .grey-box:hover strong { 
 
    color: #ffffff!important; 
 
} 
 

 
.video-bg-boxes .grey-box a { 
 
    text-decoration: none; 
 
    color: #4C4145; 
 
} 
 

 
.video-bg-boxes .grey-box:hover a { 
 
    color: #ffffff; 
 
}
<div class="video-module"> 
 
    <div class="video-bg-container"> 
 
    <div class="video-bg"> 
 
     <video autoplay="autoplay" loop="loop" controls="controls"> 
 
      <source src="https://cdn2.hubspot.net/hubfs/3372283/axon-active/img/p1/VerseQuence%20-%20Wilt%20(VOEZ%20Official%20Soundtrack)%20-%20YouTube.mp4?t=1496825800724" type="video/mp4"> 
 
     </video> 
 
    </div> 
 

 
    <div class="video-bg-boxes"> 
 
     <div class="blue-box"> 
 
     <div style="text-align: center;"><strong>Title</strong></div> 
 
     <div style="text-align: center;">&nbsp;</div> 
 
     <div style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum enim eu finibus tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eget neque scelerisque, molestie turpis sed, 
 
      tristique turpis. Proin placerat pretium libero, at pellentesque lorem condimentum eu.</div> 
 
     </div> 
 

 
     <div class="blue-box"> 
 
     <div style="text-align: center;"><strong>Title</strong></div> 
 
     <div style="text-align: center;">&nbsp;</div> 
 
     <div style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum enim eu finibus tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eget neque scelerisque, molestie turpis sed, 
 
      tristique turpis. Proin placerat pretium libero, at pellentesque lorem condimentum eu.</div> 
 
     </div> 
 

 
     <div class="blue-box"> 
 
     <div style="text-align: center;"><strong>Title</strong></div> 
 
     <div style="text-align: center;">&nbsp;</div> 
 
     <div style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum enim eu finibus tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eget neque scelerisque, molestie turpis sed, 
 
      tristique turpis. Proin placerat pretium libero, at pellentesque lorem condimentum eu.</div> 
 
     </div> 
 
    </div> 
 
    </div>

Updated Fiddle

Hoffe, es hilft :)

Quelle

2017-06-08 03:54:52 Manish

+0

In großen Bildschirm ist das Video nicht die volle Bildschirmbreite. – Lee

+0

Soll das Video immer auf dem Bildschirm mit voller Bildschirmbreite und -höhe angezeigt werden? Mögen Sie, wenn Sie etwas mehr auf das hinausgehen, was Sie wirklich brauchen, besser helfen können. – Manish

1

Sie object-fit verwenden können es

aktualisieren css

body, html { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
video { 
 
    object-fit: cover; 
 
} 
 

 
.video-module { 
 
    margin-bottom: 0px; 
 
} 
 

 
.video-bg-container { 
 
    position: relative; 
 
    z-index: 9; 
 
} 
 

 
.video-bg { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    /*z-index: 9;*/ 
 
} 
 

 
.video-bg-boxes { 
 
    position: relative; 
 
    /*position: absolute;*/ 
 
    /*top: 0;*/ 
 
    /*left: 0;*/ 
 
    /*right: 0;*/ 
 
    /*bottom: 0;*/ 
 
    padding: 70px 10%; 
 
    z-index: 10; 
 
} 
 

 
.video-bg-boxes .blue-box { 
 
    color: #ffffff; 
 
    background-color: #0091cf!important; 
 
    padding: 30px 30px 80px 30px; 
 
    font-size: 16px; 
 
    cursor: pointer; 
 
    margin-bottom: 30px; 
 
} 
 

 
.video-bg-boxes .blue-box strong { 
 
    font-size: 30px; 
 
    color: #ffffff; 
 
    text-transform: uppercase; 
 
} 
 

 
.video-bg-boxes .blue-box:hover { 
 
    background-color: #E4E1E0!important; 
 
    color: #4C4145!important; 
 
} 
 

 
.video-bg-boxes .blue-box:hover strong { 
 
    color: #0091CF!important; 
 
} 
 

 
.video-bg-boxes .blue-box a { 
 
    text-decoration: none; 
 
    color: #ffffff; 
 
} 
 

 
.video-bg-boxes .blue-box:hover a { 
 
    color: #0091CF; 
 
} 
 

 
.video-bg-boxes .grey-box { 
 
    border: none!important; 
 
    padding: 30px 30px 80px 30px; 
 
    background: url("https://cdn2.hubspot.net/hubfs/3372283/axon-active/img/p1/blue-arrow-ico.png"); 
 
    background-position: center 90%; 
 
    background-repeat: no-repeat; 
 
    font-size: 16px; 
 
    cursor: pointer; 
 
    margin-bottom: 30px; 
 
    background-color: #E4E1E0; 
 
    color: #4C4145!important; 
 
} 
 

 
.video-bg-boxes .grey-box strong { 
 
    font-size: 30px; 
 
    color: #0091CF; 
 
    text-transform: uppercase; 
 
} 
 

 
.video-bg-boxes .grey-box:hover { 
 
    background: url("https://cdn2.hubspot.net/hubfs/3372283/axon-active/img/p1/arrow-ico.png")!important; 
 
    background-position: center 90%!important; 
 
    background-repeat: no-repeat!important; 
 
    background-color: #0091cf!important; 
 
    color: #ffffff!important; 
 
} 
 

 
.video-bg-boxes .grey-box:hover strong { 
 
    color: #ffffff!important; 
 
} 
 

 
.video-bg-boxes .grey-box a { 
 
    text-decoration: none; 
 
    color: #4C4145; 
 
} 
 

 
.video-bg-boxes .grey-box:hover a { 
 
    color: #ffffff; 
 
}
<div class="video-module"> 
 
    <div class="video-bg-container"> 
 
    <div class="video-bg"> 
 
     <video autoplay="autoplay" loop="loop" controls="controls" width="100%" height="100%"> 
 
      <source src="https://cdn2.hubspot.net/hubfs/3372283/axon-active/img/p1/VerseQuence%20-%20Wilt%20(VOEZ%20Official%20Soundtrack)%20-%20YouTube.mp4?t=1496825800724" type="video/mp4"> 
 
     </video> 
 
    </div> 
 

 
    <div class="video-bg-boxes"> 
 
     <div class="blue-box"> 
 
     <div style="text-align: center;"><strong>Title</strong></div> 
 
     <div style="text-align: center;">&nbsp;</div> 
 
     <div style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum enim eu finibus tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eget neque scelerisque, molestie turpis sed, 
 
      tristique turpis. Proin placerat pretium libero, at pellentesque lorem condimentum eu.</div> 
 
     </div> 
 

 
     <div class="blue-box"> 
 
     <div style="text-align: center;"><strong>Title</strong></div> 
 
     <div style="text-align: center;">&nbsp;</div> 
 
     <div style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum enim eu finibus tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eget neque scelerisque, molestie turpis sed, 
 
      tristique turpis. Proin placerat pretium libero, at pellentesque lorem condimentum eu.</div> 
 
     </div> 
 

 
     <div class="blue-box"> 
 
     <div style="text-align: center;"><strong>Title</strong></div> 
 
     <div style="text-align: center;">&nbsp;</div> 
 
     <div style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum enim eu finibus tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eget neque scelerisque, molestie turpis sed, 
 
      tristique turpis. Proin placerat pretium libero, at pellentesque lorem condimentum eu.</div> 
 
     </div> 
 

 
    </div>

Quelle

2017-06-08 05:28:34 LKG

+0

Die Höhe des Videos skaliert nicht mit den blauen Feldern. Kannst du das Reparieren? – Lee

+0

überprüfen update antwort pass 'höhe: 100vh' um es zu bekommen. – LKG

Verwandte Themen

 Verwandte Themen