ভিডিও

কোর ওয়েব ভাইটালগুলির জন্য ভিডিও অপ্টিমাইজ করার সময় <video> ট্যাগে width এবং height বৈশিষ্ট্যগুলি সেট করা নিশ্চিত করুন৷ পরিস্থিতির উপর নির্ভর করে, আপনি poster বৈশিষ্ট্যটিও ব্যবহার করতে চাইতে পারেন।

• width এবং height বৈশিষ্ট্য : লেআউট পরিবর্তন প্রতিরোধ করতে, <video> ট্যাগে width এবং height বৈশিষ্ট্যগুলি সেট করুন। এটি ব্রাউজারকে ভিডিওর মাত্রা নির্ধারণ করতে দেয় (এবং সঠিক পরিমাণ স্থান সংরক্ষিত করে) - ভিডিও ডাউনলোড করার জন্য অপেক্ষা না করেই৷

• poster অ্যাট্রিবিউট (ঐচ্ছিক) : poster অ্যাট্রিবিউট একটি ভিডিও ডাউনলোড করার সময় যে ছবিটি প্রদর্শিত হবে তা নির্দিষ্ট করে। যদি একটি ভিডিও LCP উপাদান হয়, তাহলে LCP পোস্টার ইমেজ রেন্ডার করার সময় দ্বারা নির্ধারিত হয় - সামগ্রিক ভিডিও লোড হওয়ার চেয়ে। যদি এই বৈশিষ্ট্যটি নির্দিষ্ট করা না থাকে, ব্রাউজার ভিডিওর প্রথম ফ্রেম উপলব্ধ না হওয়া পর্যন্ত অপেক্ষা করবে, তারপর এটিকে পোস্টার ইমেজ হিসাবে ব্যবহার করুন; poster অ্যাট্রিবিউট ছাড়া ভিডিওগুলিকে বর্তমানে সবচেয়ে বড় বিষয়বস্তুর পেইন্টের জন্য বিবেচনা করা হয় না ।

এই উদাহরণে, ভিডিওটি তার কন্টেইনারের সাথে মানানসই করার জন্য আকার পরিবর্তন করে তা নিশ্চিত করতে CSS ব্যবহার করা হয়। ওয়েব ভাইটালগুলিতে এর কোন প্রভাব নেই তবে এটি একটি দরকারী কৌশল।

এইচটিএমএল

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