How to fix the problem of 'video outside of viewport' (before they were not when I published them)?

[Alisha_Jemelian]

Below is a screenshot of some of the videos effected. My website is oneblushingbride.net

Thanks for your help!

[BSS-Commerce]

Hi @Alisha_Jemelian ,

You have such a problem because your videos have a larger horizontal or vertical width than the web’s horizontal or vertical width. This can lead to a bad user experience, especially on mobile

To fix the problem, you can use the following solution:

In Online store, select Themes → More → Edit code

In base.css, add the following code at the end of the file:

iframe, video{
   max-width: 100%;
}

If your theme does not have base.css, you can add the above code before the {% endstyle %} tag of the theme.liquid file:

Click Save to save the changes @Alisha_Jemelian

[Bruce_Nolan1]

Hello, is there another way to fix this? I tried adding the code to my base.css at the bottom but it did not fix the issue as I tried to have GSC validate the fix and still got the error.

[Alisha_Jemelian]

I was wondering this too. Unfortunately, the coding didn’t work for me.

[BSS-Commerce]

Hey @Alisha_Jemelian ,

If you still have problems, you can fix the code as follows:

iframe, video {
    aspect-ratio: 16 / 9;
    height: 100%;
    width: 100%;
}