Video

Saat mengoptimalkan video untuk Data Web Inti, pastikan untuk menetapkan atribut width dan height pada tag <video>. Bergantung pada situasinya, Anda juga dapat menggunakan atribut poster.

• Atribut width dan height: Untuk mencegah pergeseran tata letak, setel atribut width dan height pada tag <video>. Dengan begitu, browser dapat menentukan dimensi video (dan mencadangkan jumlah ruang yang benar) tanpa harus menunggu video didownload.

• Atribut poster (opsional): Atribut poster menentukan gambar yang harus ditampilkan saat video sedang didownload. Jika video adalah elemen LCP, LCP ditentukan oleh waktu gambar poster dirender, bukan saat keseluruhan video dimuat. Jika atribut ini tidak ditentukan, browser akan menunggu hingga frame pertama video tersedia, lalu menggunakannya sebagai gambar poster; video tanpa atribut poster saat ini tidak dipertimbangkan untuk Largest Contentful Paint.

Dalam contoh ini, CSS digunakan untuk memastikan bahwa ukuran video diubah agar sesuai dengan penampungnya. Hal ini tidak berdampak pada Data Web, tetapi merupakan teknik yang berguna.

HTML

<video controls width="960" height="540" poster="flower-960-poster.png">
    <source src="flower-960.mp4" type="video/mp4">
</video>

CSS

        video {
    max-width: 100%;
    height: auto;
}