CODEWITHSUNDEEP
angularjsiframevideofullscreenyoutube-javascript-api
JuanO
JuanO

Reputation: 2500

Turning a an embed youtube video into full screen mode if the device orientation changed to landscape

I'm developing an AngularJS app and I'm embedding a youtube video usin YT API.

I want to play the video full screen if the user rotates the device into landscape mode with no luck :(

My sample code for the listener:

var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";     

window.addEventListener(orientationEvent, function() {
    alert("Event captured!!");
    var el = document.getElementById('youtube_player');

    if (el.requestFullscreen) {
        el.requestFullscreen();
    } else if (el.mozRequestFullscreen) {
        el.mozRequestFullscreen();
    } else if (el.webkitRequestFullscreen) {
        el.webkitRequestFullScreen();
    }
 }, false);

Does someone know if there's any restriction about the events used to capture this kind of events?

The same code, but with the listener attached to a button (using touchstart event) did the work!

thank you!

Upvotes: 1

Views: 2186

Answers (1)

Nick Rotondo
Nick Rotondo

Reputation: 127

Your assumption is correct. The request to enter fullscreen mode must be user initiated. Clicking a button is considered user initiated, but changing a device’s orientation is not. If you add an event listener for “fullscreenerror” (and the vendor prefixed variations), you’ll see your call to requestFullscreen() is firing a fullscreen error.

In addition, starting with IE11, Internet Explorer now supports the Fullscreen API. You should add a call to msRequestFullscreen as well when you use the Fullscreen API. For more info please refer to the MSDN documentation:

http://msdn.microsoft.com/en-us/library/ie/dn265028(v=vs.85).aspx

Disclosure: I am on the team that worked on Microsoft's implementation of the Fullscreen API.

Upvotes: 2

Related Questions