Hello,
We have detected a problem on the page where we publish Brightcove videos.
The player we use has the playsinline attribute set to true.
Indeed, it can be played without maximising the player, but we do not know why only part of the image is visible.
It happens when loading the page on mobile devices.
You can check it out here: https://www.myoperaplayer.com/videoteca/opera/mitridate-re-di-ponto
Why does this happen?
Best answer by Aurelio Galvan Martinez
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.
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.
I am glad the information was helpful, David. It was a pleasure assisting you 😀.
No account yet? Create an account
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.