how to put a youtube video on a website code example
Example 1: 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%)
Example 2: how to make a youtube video on a website
<iframe width="560" height="315" src="https://www.youtube.com/embed/**PUTIDOFVIDEOHERE**"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>