CODEWITHSUNDEEP
javascripthtmlcssyoutube
serge
serge

Reputation: 15239

Responsive "Full Div" YouTube video

Is there a way to put an YouTube video in a div background, like the following site does with a <video> tag, the video "covering" the div (that is, no empty spaces left, keeping the original ratio)?

Knowing that the recommended way to display a YouTube video actually in HTML5 is an iframe: 

<iframe width="420" height="315"
        src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>

enter image description here

I tried to simulate the same behavior on this codePen.

Upvotes: 1

Views: 696

Answers (2)

rastrano
rastrano

Reputation: 133

Here's a solution:

https://codepen.io/anon/pen/XZBVvN

#video{
  display:block;
  width: 100%;
  height: 100vh;
  position: fixed;
  top:0;
  left:0;
  z-index: 0;
}
#videoMessage{
   color:white;    
   position:fixed;
}

Upvotes: 0

ThomasV
ThomasV

Reputation: 336

Try this:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial;
    font-size: 17px;
}

#myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
}

.content {
    position: fixed;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    color: #f1f1f1;
    width: 100%;
    padding: 20px;
}

#myBtn {
    width: 200px;
    font-size: 18px;
    padding: 10px;
    border: none;
    background: #000;
    color: #fff;
    cursor: pointer;
}

#myBtn:hover {
    background: #ddd;
    color: black;
}
</style>
</head>
<body>

<video autoplay muted loop id="myVideo">
  <source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

<div class="content">
  <h1>Heading</h1>
  <p>Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi pro.</p>
  <button id="myBtn" onclick="myFunction()">Pause</button>
</div>

<script>
var video = document.getElementById("myVideo");
var btn = document.getElementById("myBtn");

function myFunction() {
  if (video.paused) {
    video.play();
    btn.innerHTML = "Pause";
  } else {
    video.pause();
    btn.innerHTML = "Play";
  }
}
</script>

</body>
</html>

Upvotes: 1

Related Questions