Ö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
veheight
özellikleri: Düzen kaymalarını önlemek için<video>
etiketindewidth
veheight
ö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.
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;
}