Problems with playsinline videos on mobile

First message edited

Hi David,

Thank you for your patience while I continued reviewing the behavior on your page.

I took a deeper look at how the player is being rendered on mobile devices, and I was able to identify the specific styling that is causing the video to appear cropped when the page loads.

Your site includes the following mobile-specific CSS rule:

@media (max-width: 767px) {
    .video-js .vjs-tech {
        top: 0;
        transform: none;
        height: 100vh;
        object-fit: cover;
    }
}

The property height: 100vh; forces the video to take up the full viewport height on mobile, while object-fit: cover; scales the video in a way that crops part of the image to fill the available space. When combined with the layout of the surrounding container, this results in only part of the video being visible on initial load.

To confirm this, I temporarily disabled height: 100vh; using the browser’s developer tools, and the video immediately displayed correctly on mobile. This confirms that the behavior is produced by the page’s custom CSS rather than by the Brightcove player. I have recorded my screen for your reference:

Because this styling is part of the site’s implementation, it falls outside the scope of what we can modify or support directly. My best recommendation is to share these findings with your web design or development team so they can adjust the layout or update the mobile CSS to ensure the video displays as intended.

I hope this information is helpful.

Warm regards.

Thank you for your patience in analysing the problem 😀

I will check it ASAP!

Cheers!

It works!

Thanks again ​@Aurelio Galvan Martinez 

I am glad the information was helpful, David. It was a pleasure assisting you 😀.