Overlay on HTML5 Fullscreen Video

Overlay on HTML5 Fullscreen Video

The best way to do this is to have a <div> containing the <video> and hotspots, and request fullscreen on the containing <div>.

I implemented the fullscreen and (parts of the) <video> APIs in Firefox. This z-index hack isn't the specified behaviour, so it will stop working once we update our implementation to match the latest draft of the W3C fullscreen spec.

How do I make a DIV visible on top of an HTML5 fullscreen video?

The problem is that the video is being displayed absolutely. You can make your link have position: absolute and that should do it.

Put a text on fullscreen video (HTML5)

You can embed responsively with Youtube and vimeo with iframes, and with Viddler and Blip.tv with object embed. There is an article that explains it here and code is available on github

Sample code for Youtube (using jquery):

// Find all YouTube videos
var $allVideos = $("iframe[src^='//www.youtube.com']"),

    // The element that is fluid width
    $fluidEl = $("body");

// Figure out and save aspect ratio for each video
$allVideos.each(function() {

  $(this)
    .data('aspectRatio', this.height / this.width)

    // and remove the hard coded width/height
    .removeAttr('height')
    .removeAttr('width');

});

// When the window is resized
$(window).resize(function() {

  var newWidth = $fluidEl.width();

  // Resize all videos according to their own aspect ratio
  $allVideos.each(function() {

    var $el = $(this);
    $el
      .width(newWidth)
      .height(newWidth * $el.data('aspectRatio'));

  });

// Kick off one resize to fix all videos on page load
}).resize();

How to show HTML video overlays with VideoJS in fullscreen?

The problem appears to be, that this library wraps the video in an additional div, and makes that div fullscreen - but your #overlays-wrap element is outside of that element, and I don’t think z-index is supposed to change anything about that(?).

Putting the overlay directly into #videowrapper in the source code doesn’t do the trick - the player library takes #videoplay, creates the wrapper div and puts the id on that. (It changes the id of the video element itself to #videoplay_html5_api, so no conflict in that regard.) The new div #videoplay becomes fullscreen, but #overlays-wrap still only is a sibling in the DOM, so outside of the fullscreen element.

But if you move #overlays-wrap into #videoplay after the player has initialized, it seems to work:

video = videojs('videoplay', options); // wraps video element into div#videoplay

$('#overlays-wrap').appendTo($('#videoplay')); // append #overlays-wrap to div#videoplay

https://jsfiddle.net/pw89cjqe/

---

Related Topics