Video goes fullscreen on iOS

Question

I'm using the video.js library as a replacement for traditional video tag. This mainly because the UI. The problem I have is that when I tap the video, it goes fullscreen. This in iPhone, Chrome and Safari

As you can see in the videojs.com site, there is an example from IGN and if you tap the video, is doesn't go fullscreen (the other two examples goes to fullscreen). I already tried some of their settings but still not working

<video-js id='my-video' class='video-js' controls autoplay muted preload='auto' width='300'>
  <source src='video.mp4' type='video/mp4'>
</video-js>

var fistTime = false;

var el_video = videojs('my-video', {
    autoplay: true,
    muted: true,
    controlBar: {
        fullscreenToggle: false
    },
    fullscreen: {
        navigationUI: "hide"
    },
    showRecircScreen: true,
    userInitiated: true
});

// test - for autoplay
el_video.ready(function() {
    el_video.play();
});

el_video.on('fullscreenchange', function() {
    alert("just a test");
});

el_video.on('playing', function() {
    if (!fistTime) {
        fistTime = true;

        el_video.exitFullscreen();
        el_video.play();
    }
});

I already tried to find a solution in Google, in here, already read some related docs, etc

score 2 · Accepted Answer · answered Jul 24 '19 at 09:52

2

You need the playsinline attribute.

answered Jul 24 '19 at 09:52

misterben

7,455
2
26
47

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. - [From Review](/review/low-quality-posts/23612406) – Venkatachalam Jul 24 '19 at 14:30
1

It does. Adding the attribute prevents the automatic fullscreen. – misterben Jul 24 '19 at 15:42
Great. I am not aware of it. Thanks – Venkatachalam Jul 25 '19 at 04:03

Video goes fullscreen on iOS

1 Answers1