how to embed video background in my website code example
Example: youtube as background video website
// HTML
<div class="embed-container">
<iframe src="https://www.youtube.com/embed/9QTojZVR_Ec?controls=0&autoplay=1&mute=1" frameborder="0" mute="1" allow="autoplay;encrypted-media"></iframe>
</div>
// CSS
@media (min-aspect-ratio: 16/9) {
.embed-container iframe {
height: 56.25vw;
width: 100vw;
}
}
@media (max-aspect-ratio: 16/9) {
.embed-container iframe {
width: 177.78vh;
height: 100vh;
}
}
div.embed-container {
z-index: -99;
position: absolute;
overflow: hidden;
width: 100vw;
height: 100vh;
}
div.embed-container iframe {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
// or... SASS (same as CSS but different syntax)
@media (min-aspect-ratio: 16/9)
.embed-container iframe
height: 56.25vw
width: 100vw
@media (max-aspect-ratio: 16/9)
.embed-container iframe
width: 177.78vh
height: 100vh
div.embed-container
z-index: -99
position: absolute
overflow: hidden
width: 100vw
height: 100vh
iframe
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)