Video

Önemli Web Verileri için videoyu optimize ederken <video> etiketinde width ve height özelliklerini ayarladığınızdan emin olun. Duruma bağlı olarak, poster özelliğini de kullanmak isteyebilirsiniz.

• width ve height özellikleri: Düzen kaymalarını önlemek için <video> etiketinde width ve height özelliklerini ayarlayın. Bu, videonun indirilmesini beklemek zorunda kalmadan tarayıcının videonun boyutlarını belirlemesini (ve doğru miktarda alanı ayırmasını) sağlar.

• poster özelliği (isteğe bağlı): poster özelliği, video indirilirken gösterilmesi gereken resmi belirtir. Bir video LCP öğesiyse LCP, genel videonun yüklenmesi yerine poster resminin oluşturulma zamanına göre belirlenir. Bu özellik belirtilmezse tarayıcı, videonun ilk karesi sunulana kadar bekler ve ardından bunu poster resmi olarak kullanır. poster özelliği bulunmayan videolar şu anda Largest ContentfulPaint için dikkate alınmaz.

Bu örnekte, videonun kapsayıcısına sığacak şekilde yeniden boyutlandırılmasını sağlamak için CSS kullanılır. Bunun Web Verileri üzerinde etkisi yoktur ancak yararlı bir tekniktir.

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

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