<video> tag renders differently in mobile and PC-CodePudding

I'm working on a passion project of mine and seem to be facing this issue, the problem is I have a video tag to display a promo for the project and the video works when the user clicks play. The problem I face is how it renders in mobile and PC. In Desktop there's no issues as we can see the complete video with the pink background when the website loads up. But in mobile/iPad only the play button is visible but the video works on these devices, when the user clicks play but I don't find it visually appealing. I'm attaching pictures of the two below. Thanks for your answers in advance!

I'm also attaching my HTML code for the above section :

    <!--About Section-->
    <section  id="about">
        <div >
            <div class = "row">
                <div >
                    <h1 >About</h1>
                </div>
                <div >
                    <video width="650" controls>
                        <source src="./assets/img/Meko-video.mp4" type="video/mp4">
                        Your browser does not support HTML video.
                      </video>
                </div>
            </div>
        </div>
    </section>

CodePudding user response：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
video {
  width: 100%;
  height: auto;
}
</style>
</head>
<body>

<video width="400" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<p>Resize the browser window to see how the size of the video player will scale.</p>

</body>
</html>

CodePudding user response：

Poster Attribute

Add the following attributes to <video> tag:

poster="URL of an image"^✥

Read this article for details.

Bootstrap 5 Classes

<block level tag> (ex. <div> or <figure>) / parent element of <video>
- .ratio
- .ratio-16bx9

Refer to Bootstrap 5 Ratio

^✥If the poster doesn't show after page is loaded try the following:

Add autoplay and muted attributes to the <video> tag.
Add this code to either a <script> tag placed before the closing </body> tag or a JS file:
```
setTimeout(function() { document.querySelector('video').pause() }, 1000);
```

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<section  id="about">
  <div >
    <div >
      <div >
        <h1 >About</h1>
      </div>
      <div >
        <figure >
          <video controls poster='https://i.ibb.co/1K4Ppr6/00.png' width='100%'>
        <source src="https://glpjt.s3.amazonaws.com/so/av/vs12s3.mp4" type="video/mp4">
        </video>
        </figure>
      </div>
    </div>
  </div>
</section>