Solution 1 :

I was wondering, why don’t you try to play the video with some JQuery, if you pretend to show the video when the mouse hover the video you should just add the following code on your body :

<script>
$(document).ready(function () {

//This creates a figure with two functions for the video (Hover and Hide)
var figure = $("#myVideo").hover( hoverVideo, hideVideo ); 

//Here you tell to the functions what they will do.
function hoverVideo(e) { $('video', this).get(0).play(); }
function hideVideo(e) { $('video', this).get(0).pause(); }

});
</script>

If you want it on hover button it would have to be something like this :

<script>

$(document).ready(function () {

//You catch if the button is hover
 $("#myBtn").hover(function () {
        $(this).children("video")[0].play();
    }, function () {
        var video = $(this).children("video")[0];
        video.pause();
        video.currentTime = 0;
    });
});
</script>

Problem :

An Image of the page

I am trying to make a video play in the .content as background whenever someone hovers over the “go to the site” button…

And the main way I am trying that (summing it up) is that for the CSS of the video to be played, I have set the video as {visibility: hidden;}

and when you hover over the button then it turns to {visibility: visible;}…
For influencing the video by hover I’ve added “+” in one of my CSS regions like #myBtn:hover + .bottomvideo{}

However, the video does not appear even when I hover over the button…

Moreover, when I tried checking by turning the video visible, but it appeared in a very small space and did not cover the whole .content region as it should have done, in keeping with the CSS
This is how the video is visible…

Moreover the video does not loop despite the loop mentioned in the video tag…

My code:

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

/* Add some content at the bottom of the video/page */
.content {
  position: fixed;
  bottom: 0;
  background: rgba(0, 30, 60, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
  height: 30%;
}
.maincontent{
  position: absolute;
  top: 0;
  left: 20px;
}

.bottomvideo{
  z-index: -1;
  visibility: hidden;
  width: 100%;
  height: 100%;
  bottom: 0;
  right: 0;
}


/* Style the button used to pause/play the video */
#myBtn {
  width: 200px;
  font-size: 18px;
  padding: 10px;
  background: #000;
  color: #fff;
  cursor: pointer;
  height: 140px;
  position: fixed;
  right: 10%;
  bottom: 0;
  border: 5px rgba(0,56,56,0.8);

}

#myBtn:hover {
  background: #ddd;
  color: black;
}

#myBtn:hover + .bottomvideo {
  visibility: visible;
}

.ontop{
  background-color: rgba(255,255,260,0.5);
  position: fixed;
  top: 30%;
  left: 32%;
  color: powderblue;
}

.ontop::before{
  content: "high";
  font-size: 70px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="decription" content="Potternoses is Indore's Only Major Large-Scale Collection of PotterHeads...">
    <title>PotterNoses Indore</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <video autoplay muted loop id="myVideo">
      <source src="videosopenpagbackgnd.mp4#t=5,62" type="video/mp4">
    </video>
    <div class="ontop">

    </div>

<!-- Optional: some overlay text to describe the video -->
    <div class="content">
      <video autoplay muted loop class="bottomvideo">
        <source src="videosvideoplayback.mp4#t=57,86" type="video/mp4">
      </video>
      <div class="maincontent"><br>
        <p class="heading">Heading</p>
        <p class="Bottomcontent">Lorem ipsum...</p>
      </div>
      <button id="myBtn">Go to the Site</button>
    </div>
  </body>
</html>

Please don;’t rely on the result of the snippet as there ain’t no videos uploaded there

Need help with all three of these problems…

By

Leave a Reply

Your email address will not be published. Required fields are marked *