CODEWITHSUNDEEP
javascriptiframeyoutube-api
Chris Scott
Chris Scott

Reputation: 643

Is there a way to put content on top of youtube's full screen mode?

I'm using the Youtube iframe api.

I have a need to put content on top of the youtube iframe player. Example: when a video finishes, I want to show options for the next video to play. I've accomplished this in non-full screen mode using z-index and the wmode: "transparent" option (required to make it work in IE) like so:

 player = new YT.Player('show', {
      height: '540',
      width: '960',
      videoId: firstID,
      playerVars: { rel:0,modestbranding:1, wmode: "transparent" },
      events: {
    'onStateChange': onPlayerStateChange
    }

    });

This works, however, when the user clicks the "full screen" button, the content is hidden behind the youtube iframe... I can't seem to position content on top of full screen mode. The same thing happens with the vimeo player using the vimeo api but I suppose that's another can of worms. Any ideas?

Upvotes: 0

Views: 829

Answers (1)

jlmcdonald
jlmcdonald

Reputation: 13667

Each browser implements HTML5 fullscreen video a bit differently; for example, on Chrome you end up with an iframe whose z-index is 2147483647. If you set the z-index of your content higher than that, it may achieve what you want.

However, it's important to note that Flash fullscreen bypasses the browser altogether, so I'm not sure that you'll find a solution that meets all use cases. Theoretically you could restrict your app to HTML5 videos only, and then deal with that, but it may not be feasible for you.

I might also (in the interest of full discussion, FWIW) point out that, as far as YouTube goes, the TOS might restrict what you're trying to do:

https://www.youtube.com/static?template=terms

(section 4F).

Upvotes: 1

Related Questions