Podczas optymalizowania filmów pod kątem podstawowych wskaźników internetowych ustaw atrybuty width
i height
w tagu <video>
. W zależności od sytuacji możesz też używać atrybutu poster
.
Atrybuty
width
iheight
: aby zapobiec przesunięciom układu, ustaw atrybutywidth
iheight
w tagu<video>
. Dzięki temu przeglądarka może określić wymiary filmu (i zarezerwować odpowiednią ilość miejsca) bez konieczności czekania na jego pobranie.Atrybut
poster
(opcjonalny): atrybutposter
określa obraz, który ma się wyświetlać podczas pobierania filmu. Jeśli element LCP to film, LCP jest określany na podstawie czasu wyrenderowania obrazu plakatu, a nie momentu wczytania całego filmu. Jeśli ten atrybut nie zostanie określony, przeglądarka będzie czekać, aż pojawi się pierwsza klatka filmu, a potem użyje tego atrybutu jako obrazu plakatu. Filmy bez atrybutuposter
obecnie nie są brane pod uwagę w kategorii największej treści.
W tym przykładzie kod CSS zmienia rozmiar filmu w taki sposób, aby pasował do kontenera. Nie ma to wpływu na wskaźniki internetowe, ale jest przydatną techniką.
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;
}