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%)
Are there any code examples left?
New code examples in category CSS
-
CSS 2022-03-27 22:50:16 make text bigger html5
-
CSS 2022-03-27 21:40:08 move list item to left css
-
CSS 2022-03-27 21:35:05 reduce image size css
-
CSS 2022-03-27 21:30:21 css image background center horizontally in div
-
CSS 2022-03-27 21:05:02 css button styles
-
CSS 2022-03-27 18:50:09 compass font awesome
-
CSS 2022-03-27 18:50:06 modal in materialize css
-
CSS 2022-03-27 17:55:12 box round corner css
-
CSS 2022-03-27 17:45:12 jquery add css
-
CSS 2022-03-27 17:45:01 css image fit in div with aspect ratio