Cordova Slack Digest

Wed, 06 Jan 2021 08:52:53 GMT

User count: 4304

Join the conversation at slack.cordova.io

Channel #cordova-android (1 messages)

---

Tue, 05 Jan 2021 16:57:06 GMT

@ucheozoemena says

Hi folks, happy New Year to you all! Please I need some help here.

I‘m seeing a brief period when an HTML5 video’s dimensions are incorrect when the video is initially played. You can see in the attached screenshots.

I got the screenshots from Chrome on my laptop, but the same problem is happening on an Android Cordova app. I already set both the width and height attributes on the video but it doesn‘t prevent this from happening. I’m serving the video from my own backend. I tried uploading the video to dropbox and serving it from there and the bug doesn‘t happen. I can see that dropbox adds preload="auto" to the <video> tag, so I did that too but it didn’t help. I‘m not sure what else to try, I’m open to any ideas. Thanks!

This is the associated HTML and CSS in the Android cordova app. I don‘t think my CSS would be responsible because simply loading the video in the browser with chrome’s default video styling still causes the issue.

  <div class="video-centering-container shown">
    <div class="videoHolder">
      <p class="video_container">
        <video width="1088" height="1920" poster="<poster-url>" controls="" loop="" playsinline="">
          <source src="<video-url>" type="video/mp4">
        </video>
      </p>
    </div>
  </div>
</div>```
And the CSS:
```.pswp {
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    -ms-touch-action: none;
    touch-action: none;
    z-index: 1500;
    -webkit-text-size-adjust: 100%;
    -webkit-backface-visibility: hidden;
    outline: none;
    opacity: 1;
}

.pswp * {
    box-sizing: border-box;
}

.pswp .video-centering-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 70vh;
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.pswp .video-centering-container.shown {
    height: 100vh;
}

.pswp .videoHolder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
}

.video_container {
    width: 50vw;
    height: 20vh;
    overflow: hidden;
    position: relative;
}

.videoHolder .video_container {
    width: 100vw;
    height: 100%;
}

.video_container video {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
}

.videoHolder .video_container video {
    object-fit: contain;
}```
Thanks!