Shapely video section on mobile not sizing video correctly

I have the video uploaded on wordpress and it displays correctly on a desktop, but on mobile the right 2/3rds or more of the video is not visible. Is this something that can be corrected or an error i have made?

Hello there,

I hope you are doing well today.

As it stands, mobile websites do not handle videos well because there are so many different screen sizes so the standard for mobile does not allow videos to work.

You can use the following CSS code to adjust the video width by going to Appearance > Customize > Additional CSS and pasting it there.


/*Video width*/
video {
    width: 100% !important;
}

Best Regards,
Support

Thanks for the help. Once the play button is pushed the video plays correctly. Prior to pushing play only a portion of the image of the video is displayed. Once the video finishes playing or is paused it displays correctly. Anyway that can be fixed?

Hello there,

That is an issue with the video itself, usually videos used on websites would have some some space at the beginning to prevent this.

Best Regards,
Support

if i upload the video through youtube and embed it, it displays the correct width before playing. Unfortunately it also diplays a nonfunctional play button in the center of the video that makes that route a no go for me. Its surprising to hear an issue with the video when youtube embed shows correctly. i can add some empty white frames at the beginning of the video, but that just hides the problem of it not being displayed correctly. It still looks terrible.