# demo

---
patternId: web-vitals-patterns/video/video-gif
---

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Video demo</title>
    <style>
        body {
            font-family: system-ui;
            display: grid;
            justify-items: center;
            padding: 1em;
            line-height: 1.5;
        }
    </style>
</head>
<body>
    <h1>GIF-style video</h1>
    <video autoplay loop muted playsinline width="320" height="240">
        <source src="https://web-dev.imgix.net/video/j2RDdG43oidUy6AL6LovThjeX9c2/HhcHgzvoYoMJ57J9fk2w.mp4" type="video/mp4">
    </video>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
        incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam 
        erat velit. Integer eget aliquet nibh praesent. Sit amet mattis vulputate enim nulla. 
        Faucibus nisl tincidunt eget nullam non. Sem fringilla ut morbi tincidunt augue. 
        Sed id semper risus in hendrerit gravida rutrum quisque non. Blandit aliquam etiam 
        erat velit scelerisque in dictum non consectetur. Et ultrices neque ornare aenean 
        euismod. Dignissim sodales ut eu sem integer vitae justo. Justo eget magna fermentum 
        iaculis eu non diam phasellus.
    </p>
</body>