Ich bin auf der Suche nach einem HTML & CSS Weg, um diese einbetten Video als 75vh Höhe Held Hintergrund anzuzeigen.Volle Breite Youtube Embed Held Hintergrund Video
Vorerst behält der iFrame seine width: 100% und seine height: 75vh, aber die Bilder selbst decken nicht die gesamte Headerbreite ab.
Eigentlich muss ich es wie einbackground-size: coverEigenschaft verhalten.
Hier ist eine schnelle Datei, um dieses Problem zu veranschaulichen, die beste Möglichkeit, um zu sehen, ist es in einem neuen Tab.
PS: Ich kenne viele Artikel gibt es über diese Art von Problem zu sprechen, aber ich habe eine Lösung gefunden, die für mich funktioniert.
body {
background: #aaa;
margin: 0;
padding: 0;
height: 2000px;
}
body {
background: #aaa;
margin: 0;
padding: 0;
height: 2000px;
}
header {
background: #ddd;
height: 75vh;
width: 100%;
}
.video__wrapper {
position: relative; padding-bottom: 53.25%; /* 16:9 */ padding-top: 25px;
}
.video__inner {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
min-height: 100%;
}<body>
<header>
<iframe src="https://www.youtube.com/embed/w7Ap0k7qp2k?autoplay=1&loop=0&rel=0&showinfo=0&controls=0&autohide=1" frameborder="0" class="video__inner"></iframe>
</header>
<main></main>
</body>EDIT
Dieser Artikel erklärt, wie HTML & CSS verwenden, nur zu Art "Ernte" ein Video, um es auf ganze Bildfenster abdecken zu machen .
Sehen sie in Aktion mit diesem großen codepen
https://codepen.io/cvn/pen/WbXEoX?q=youtube+object+fit&limit=all&type=type-pens
hier codepen Verbindung ist, die Ihnen helfen könnten https://codepen.io/dudleystorey/pen/PZyMrd? Editoren = 0100 – amyogiji
Ich versuche schon diese Lösung, aber es funktioniert für eine volle pag Das Hintergrundvideo. Ich brauche es für einen Helden Hintergrund vid, die iFrame Abdeckung voll widh & Höhe, aber das Bild wird von schwarzem Rand abgerundet. Es ist eher ein 'background-size: contain' als ein' background-size: cover'-Verhalten :) –
Eigentlich habe ich gerade diesen Post zufällig gefunden: > https://codepen.io/cvn/pen/WbXEoX?q= youtube + objekt + fit & limit = alle & type = type-pens Und es funktioniert wie ein Charme. Ich weiß nicht einmal wie, aber ich werde einen kurzen Moment brauchen, um all diese Logik zu verstehen und werde eine Antwort auf meine eigene Frage veröffentlichen! –