youtube video background autoplay html code example
Example: youtube as background video website
// HTML
// 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%]
Video liên quan