Bootstrap4 compatibility with IE and Edge - Nav dropdown and video tag issues

user_13511228 0
Viewed 75

I've made my first website, and I've run into some issues that I cannot solve myself.
The website is Bootstrap 4.

https://jsfiddle.net/NUJ88/cn2bdrw1/ <-- My nav

1: My main issue is compatibility with IE and Edge (Possibly also Firefox). Everything works fine in Chrome.

When I open it in IE11 the nav dropdowns aren't target-able and wont stay open on click. How do I solve this?

2: My second issue is the fullscreen html5 video function, which wont display on IE11 or Edge.

HTML: 

<video autoplay muted loop id="homeVideo">
     <source src="./local-source-mp4-file" type="video/mp4"; codecs="H.264/MPEG-4">
     Your browser does not support HTML5 video.
</video>

CSS: 

#homeVideo {
  position: relative;
  width: auto;
  min-width: 100%;
  height: auto;
  background: transparent url(video-bg.jpg) no-repeat;
  background-size: cover;
}

video {
  display: block;
}

.video-container {
  width: 100%;
  max-height: 600px;
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  z-index: -100;
bootstrap-4 html5-video drop-down-menu css html
1 Answers

This will do the job. The css is responsive so the video keeps its 16:9 ratio on all screen formats. It is not possible to have full width and full height because a video is 16:9 and many screens are not.

If you do not support Opera older then version 25 then you can remove the type="video/ogg" line. All modern browsers support type="video/mp4".

Note that the width="320" height="180" in the <video> tag are doing nothing. The css sets width and responsive height.

The styling of the <video> is terrible. For example, it is not possible to change icons, change button shape, etc. etc. For syling, a Javascript player is required, lik jPlayer http://jplayer.org

Trying to automatically execute the video to full screen (like the full screen button on the video player) is not possible. Even with the Javascript 'requestFullscreen' method it will result in an error Video API can only be initiated by a user gesture. In other words, the full screen can only be started by the website visitor with, for example, a button in the html.

<body>
  <div class="videoContainer">
    <video width="320" height="180" autoplay controls muted>
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
      <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
    </video>
  </div>
</body>

with this css to keep the 16:9 ratio on all screen formats

*, *::before, *::after {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.videoContainer {
  display: block;
  width: 100%; /* width of video */
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.videoContainer::before {
  display: block;
  content: "";
  padding-top: 56.25%; /* keep 16:9 ratio */
}
.videoContainer video {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
user_51609200
Related