هنگام بهینهسازی ویدیو برای Core Web Vitals، حتماً ویژگیهای width
و height
را در تگ <video>
تنظیم کنید. بسته به موقعیت، ممکن است بخواهید از ویژگی poster
نیز استفاده کنید.
صفات
width
وheight
: برای جلوگیری از جابجایی طرح، ویژگی هایwidth
وheight
را در تگ<video>
تنظیم کنید. این به مرورگر اجازه میدهد تا ابعاد ویدیو را تعیین کند (و فضای مناسب را رزرو کند) - بدون اینکه منتظر بماند تا ویدیو دانلود شود.ویژگی
poster
(اختیاری) : ویژگیposter
تصویری را مشخص میکند که باید هنگام بارگیری ویدیو نمایش داده شود. اگر یک ویدیو عنصر LCP باشد، LCP با زمانی که تصویر پوستر رندر میشود تعیین میشود - نه زمانی که کلیت ویدیو بارگیری میشود. اگر این ویژگی مشخص نشده باشد، مرورگر منتظر می ماند تا اولین فریم ویدیو در دسترس باشد، سپس از آن به عنوان تصویر پوستر استفاده کنید. ویدیوهای بدون ویژگیposter
در حال حاضر برای بزرگترین رنگ محتوایی در نظر گرفته نمی شوند .
در این مثال، از CSS برای اطمینان از تغییر اندازه ویدیو به تناسب ظرف خود استفاده می شود. این هیچ تاثیری بر Web Vitals ندارد اما یک تکنیک مفید است.
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;
}