HTML5 video on full screen rotaate the screen like on youtube in mobile device using jquery / javascript?

Question

I have a html5 custom video player, now I would like on clicking the full-screen icon on mobile to rotate the screen to landscape and vice versa as in youtube.

Here is my HTML

  <div id="video-block">
    <video class="video_player" id="player" width="100%" controls="controls" autoplay="autoplay">
      <source src="INPUT VIDEO URL HERE"/>
      Your browser does not support the HTML5 video tag.  Use a better browser!
    </video>
    <button onclick="goFullscreen('player'); return false">
      View Fullscreen!
    </button>
 </div>

Here is js

$(document).ready(function() {

    // rotate function

    function rotateVideoPlayer() {
        var width = $(window).width();
        var height = $(window).height();

        $("#video-block").width(0);
        $("#video-block").height(0);

        console.log(width, height);
        // document.body.scrollTop = document.documentElement.scrollTop = 0
        if (width > height) {
            console.log("landscape");
            $("#video-block").width(width);
            $("#video-block").height(width * 9 / 16);


            $("#video-block").css("left", 0 + "px");
            $("#video-block").removeClass("rotated");

        } else {

            console.log("portrait");
            $("#video-block").width(height);
            $("#video-block").height(height * 9 / 16);


            $("#video-block").css("left", width - (width - height * 9 / 16) / 2 + "px");
            $("#video-block").addClass("rotated");
            document.body.scrollTop = document.documentElement.scrollTop = 0

        }
    }


    $('#btn').on('click', function(){
        rotateVideoPlayer();
        var element = document.getElementById('videocontainer');
        if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if (element.webkitRequestFullScreen) {
            element.webkitRequestFullScreen();
        }
    })
});

css

#video-block.rotated{
    -moz-transform:rotate(90deg);
  -webkit-transform:rotate(90deg);
  -o-transform:rotate(90deg);
  -ms-transform:rotate(90deg);
  transform:rotate(90deg);
}

Unfortunately, my solution is not working as expected, there is a full screen but rotation is not working properly as on youtube.

Can someone help me to solve this problem? any help or suggestions will be appreciated

Not getting any ideas. But, maybe [this](https://www.jotform.com/blog/html5-screen-orientation-api-uses-javascript-to-rotate-the-screen-89639/) article might help. It's about the screen orientation. — Random COSMOS, May 05 '20 at 18:06
It's not clear under which circumstances you want to rotate: When the `
` ratio changes? When the screen changes orientation? Why not use [media queries to detect landscape/portrait orientation](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation) and specify which CSS to apply in either case? — kmoser, May 09 '20 at 23:12
@Tuckbros I solved the problem but I am not happy with it its, because I am just rotating the video player, there is a lot of problem with different devices — The Dead Man, May 12 '20 at 09:08
This [answer](https://stackoverflow.com/questions/1207008/how-do-i-lock-the-orientation-to-portrait-mode-in-a-iphone-web-application) help ? — Simone Rossaini, May 12 '20 at 12:40
@SimoneRossaini I tried all of them, i just came up with my own solution close to that , combination of css na js, on click I just rotate the videoplayer and change the width and height of a player accordingly , and force the orientation to landscape , it works but not pure full screen , there is a lot to be done to make it perfect , I HATE IPHONE — The Dead Man, May 12 '20 at 12:45
@SimoneRossaini there are too many complications with ios safari it reminds me a lot with Explorer :( check my other thread https://stackoverflow.com/questions/61751980/media-error-formats-not-supported-or-sources — The Dead Man, May 12 '20 at 12:50

Ravichandran · Answer 1 · 2020-05-06T14:13:37.603

9

You can use screen.orientation.lock('landscape') to enable landscape once you are entering full-screen mode. It works for android only.

As there are some limitations on iOS for enabling full-screen mode, it's better to use default behaviours for videos on iOS as youtube does.

$(function() {

  function makeLandscape() {
    // this works on android, not iOS
    if (screen.orientation && screen.orientation.lock) {
      screen.orientation.lock('landscape');
    }
  }

  $(document).on('click', '#btn', function() {
    var element = document.getElementById('video-container');
    if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
      makeLandscape();
    } else if (element.webkitRequestFullScreen) {
      element.webkitRequestFullScreen();
      makeLandscape();
    }

  });

});

<div id="video-container">
  <video class="video_player" id="player" width="100%" autoplay="autoplay" playsinline="">
          <source src="https://wp-iframe.videomill.co/vpaidexamples/videos//vmerce.mp4" />
          Your browser does not support the HTML5 video tag. Use a better browser!
        </video>
  <button id="btn">
          View Fullscreen!
        </button>
</div>

edited May 06 '20 at 14:13

answered May 06 '20 at 06:59

Ravichandran

1,029
6
11

What about iPhone ios? – The Dead Man May 06 '20 at 08:02
1

What about iPhone ios? and u need to provide your code here not the only link to jsfiddle, please test your solution on iPhone ios, and you will see that our solution is not working, I provided 300 bounties meaning that it's not simple as you think, remember Full-screen API not supported in iPhone ios – The Dead Man May 06 '20 at 08:15
Please refer to this https://stackoverflow.com/help/how-to-answer – Jefferson X Masonic May 06 '20 at 08:18
you can rotate the content like mentioned in this https://stackoverflow.com/questions/35856013/rotate-all-html-element-whole-page-90-degree-with-css. But even there are limitations on iOS for hiding toolbar, and full-screen mode enabling. – Ravichandran May 06 '20 at 14:16
8

Why are people downvoting this answer? It's the closest thing there is to a cross-platform solution. iOS Safari is well known to be a crappy non-standards-compliant browser and the best thing you can do with it is hope the default behavior works. – Robert Moore May 10 '20 at 00:12

score 0 · Answer 2 · answered May 12 '20 at 12:49

0

Mate, You have just not provided correct ID in the video player, Instead of id="player" provide id="video-block", That is the reason why rotation CSS is not being applied. In below mentioned Tag

<video class="video_player" id="player" width="100%" controls="controls" autoplay="autoplay">enter code here

answered May 12 '20 at 12:49

Rahul khanvani

373
3
13

typing error but u understand the idea, and the problem is known to most developers, by the way, that does not solve the problem, check the demo and come with the solution – The Dead Man May 12 '20 at 12:53

HTML5 video on full screen rotaate the screen like on youtube in mobile device using jquery / javascript?

2 Answers2

Linked