इनस्ट्रीम वीडियो

Core Web Vitals के लिए, वीडियो को ऑप्टिमाइज़ करते समय, width और <video> टैग पर height एट्रिब्यूट. स्थिति के आधार पर, आपके पास आपको poster एट्रिब्यूट का इस्तेमाल भी करना है.

• width और height एट्रिब्यूट: लेआउट शिफ़्ट रोकने के लिए, width को सेट करें और <video> टैग पर height एट्रिब्यूट. इससे ब्राउज़र को ये काम करने की अनुमति मिलती है वीडियो के डाइमेंशन तय कर सकते हैं (और इसलिए वीडियो के डाउनलोड होने का इंतज़ार किए बिना.

• poster एट्रिब्यूट (ज़रूरी नहीं): poster विशेषता उस इमेज के बारे में बताती है जिसे वीडियो के डाउनलोड हो रहा है. अगर किसी वीडियो में एलसीपी एलिमेंट है, तो एलसीपी उस समय से तय होता है पोस्टर इमेज या वीडियो का पहला फ़्रेम रेंडर किया जाता है. जैसे कि इमेज यह आम तौर पर हल्का होता है. पोस्टर इमेज इस्तेमाल करने से एलसीपी तेज़ी से बढ़ सकती है.

इस उदाहरण में, सीएसएस का इस्तेमाल करके यह पक्का किया जाता है कि वीडियो के साइज़ को कंटेनर. इससे वेबसाइट की परफ़ॉर्मेंस की जानकारी पर कोई असर नहीं पड़ता है. हालांकि, यह एक मददगार तकनीक है.

<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;
}