Consider this very simple page with an embedded video:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Video test</title>
<style>
#container {
width: 450px;
}
video {
max-width: 624px;
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div id="container">
<video playsinline muted loop autoplay src="/build/img/daily/home/dashboard.mp4" poster="/build/img/daily/home/dashboard-poster.jpg">
Video not supported
</video>
</div>
</body>
</html>
Every time the page (re)loads, the video briefly jumps around:
The issue can be seen in practice here.
Amongst others, I tried using background-image
instead of poster,
but that made it even worse.
I would highly appreciate some help here; thanks!
It appeared to be a bug in WebKit. (Mobile) Safari in macOS 16.1 and iOS 16.2 don't have this issue anymore.