CODEWITHSUNDEEP
csshtmlvideo
wpursell
wpursell

Reputation: 3

HTML5 Video Not Loading

I am currently learning to use videos as a background on the websites I am developing. The issue that I am having is that I can't get the videos to actually appear. I believe it has to do with the way I have them stored in a folder, but after trying multiple different methods of accessing the files, I still can't get them to display. The goal is to have the video stored in the "videos" folder to be displayed as my page background. My question is, what elements am I missing for this to work? I have tried moving the files into the main folder as well as adjusting the CSS a few times. Both yielded no results.

My current setup is as followed:

My files are stored like this (I apologize for the link, I can't embed images yet): File Hierarchy 

backgroundVideo {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  background: URL(images/resBackground.jpg);
  background-size: cover;
}
<body>

  <video autoplay loop class="backgroundVideo">
        <source src="videos/resVideoBackground.mp4" type="videos/mp4"/>Your browser does not support the video tag! Please upgrade your broswer!
        <source src="videos/resVideoBackground.webm" type="videos/webm"/>Your browser does not support the video tag! Please upgrade your broswer!
        <source src="videos/resVideoBackground.ogv" type="videos/ogv"/>Your browser does not support the video tag! Please upgrade your broswer!
      </video>

</body>

Any guidance on how to get the video running is greatly appreciated!

Upvotes: 0

Views: 1415

Answers (1)

Luke Hollenback
Luke Hollenback

Reputation: 791

Your file hierarchy and the way you are referencing your files from your CSS and HTML looks fine to me.

I notice a couple things right off the bat. The first is that, in your source elements, the proper type is a singular video/mp4, video/webm, and video/ogv.

Another common tactic when implementing background videos into websites is to add a little JavaScript that "kicks" them on browsers that don't like the autoplay attribute. For example (you'll need to add an id="backgroundVideo" to your video element for this to work):

<script type="text/javascript">
    // Play the background video on Android devices that support the
    // "canplay" event listener
    var backgroundVideo= document.getElementById('backgroundVideo');
    backgroundVideo.addEventListener('canplay', function() {
        backgroundVideo.play();
    });
</script>

I would add this script element, either externally or inline, at the very end of the body.

Upvotes: 1

Related Questions