IOS video scale issue?

[DDematto]

Description

I am working with videojs to display a HLS video to my locally hosted website, and it works well on devices such as pc's however I am a bit stumped as to the behavior I am experiencing when it comes to playing the video on IOS devices

When say streaming my IDE, on any pc it looks fine you see the whole desktop as for IOS however you see the smallest top left corner of the IDE

Im not sure exactly what to call this issue but it seems when playing the video on IOS the scale of the video is off?

<video id="stream" class="video-js vjs-fluid vjs-default-skin" controls muted autoplay preload="auto"></video>

<script>
        let host_name = '{{ request.META.HTTP_HOST }}';

        let player = videojs(document.querySelector('#stream'));
        player.src({
            src: 'http://' + host_name + '/static/streams/main/stream.m3u8',
            type: "application/x-mpegURL"
        });

        player.load();
        player.play();
</script>

I am loading from a HLS on my local computer, I would imagine it would be the same outcome for other streams but I dont know of any active streams I could test with

Results

Expected

This is a screenshot of what the HLS video looks like on browser Expected

Actual

When the same video plays on ios devices it will be the following Actual

Error output

Cant check for errors on IOS devices, none for backend or on any other browser

Additional Information

Version - 7.8.2

Browser - Safari

OSes - IOS

[welcome[bot]]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[video-archivist-bot]

Hey! We've detected some video files in a comment on this issue. If you'd like to permanently archive these videos and tie them to this project, a maintainer of the project can reply to this issue with the following commands:

• http://' + host_name + '/static/streams/main/stream.m3u8: @video-archivist-bot save WjbVjX
• https://cdn.discordapp.com/attachments: @video-archivist-bot save 1jYmjq

[gkatsev]

Would you be able to share a reduced test case? Do you have extra CSS on the page that targets videojs or a video element?

[DDematto]

Would you guys know of a HLS stream that I could use as a test-case for my test case? Im not going to be able to upload mine for testing. I will test with an MP4 for the moment and see if that also gives a strange effect

[DDematto]

Here is a reduced test case HTML Setup The actual source is loaded at runtime and I could not find any online for test examples

With further testing I did find something rather interesting, I tested the app with 3 iPhones, two of the same model (6) one of which was outdated and one was on the latest version And I tested the app also on a newer iPhone model (8)

When testing originally I used the one iPhone to find that it didn't load the video correctly and gave this weird result https://cdn.discordapp.com/attachments/243060413628022784/794788606781947945/image0.jpg I then tried the same model but with the updated version to the same result

However when trying the iPhone 8 with the video it worked as expected? I wouldn't expect a newer model iPhone to behave differently than older ones but both these iPhones tested were on the same OS version.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.