چگونه ویدیوهای YouTube را پاسخگو کنیم • Yoast

هنگام جاسازی یک ویدیوی YouTube در وب سایت خود، احتمالاً یک مشکل جزئی اما بسیار آزاردهنده را کشف کرده اید: جاسازی های YouTube به طور بومی پاسخگو نیستند. این بدان معناست که برای مثال وقتی صفحه وب خود را در دستگاه تلفن همراه مشاهده می کنید، اندازه ویدیو با بقیه عناصر صفحه به درستی تغییر نمی کند. این می تواند بر طراحی و قابلیت استفاده وب سایت شما تأثیر منفی بگذارد. پس چرا این اتفاق می افتد و چه کاری می توانید در مورد آن انجام دهید؟

چرا ویدیوهای YouTube پاسخگو نیستند

تعبیه‌های استاندارد YouTube، مانند موارد زیر، از iFrames برای تولید یک پخش‌کننده ویدیوی جاسازی شده استفاده می‌کنند:

مزیت استفاده از آی فریم؟ این یک قطعه ساده از HTML است. به علاوه، به جاسازی‌های YouTube اجازه می‌دهد تا با گسترده‌ترین انتخاب ممکن از موارد استفاده، برنامه‌ها و سیستم‌های مدیریت محتوا سازگار باشند. یوتیوب همچنین می‌تواند جاسازی‌های ویدیوی موجود را با سبک‌های پخش‌کننده جدید یا اسکریپت‌های تبلیغاتی از سمت سرور به‌روزرسانی کند، بدون اینکه کاربران مجبور شوند کد وب‌سایت‌هایشان را تغییر دهند. این کار به این دلیل کار می کند که یک iFrame اساساً به عنوان پنجره ای به یک صفحه دیگر عمل می کند.

گاهی اوقات ویدئوها در اندازه های خاص صفحه نمایش به درستی نمایش داده نمی شوند. ویدیوی بالا در داخل صفحه نمایش قرار نمی گیرد.

اما یک نقطه ضعف نیز وجود دارد. استفاده از iFrames می تواند بارگذاری ویدیوهای YouTube را در هر صفحه ای کندتر کند. همچنین ممکن است به این معنی باشد که ویدیوها همیشه در اولین رنگ قابل مشاهده نیستند، زیرا یک مرورگر قبل از اینکه بتواند ویدیو را بارگیری کند باید iFrame را پیدا کرده و بارگذاری کند. در نهایت، و ناامیدکننده‌تر، بدون CSS یا جاوا اسکریپت، یک راه بومی برای تطبیق ویدیوهای YouTube با یک ظرف وجود ندارد. به همین دلیل است که embed یک اندازه (به طور پیش فرض 560 x 315) را مشخص می کند.

در نتیجه، برای اینکه یک YouTube Embed واقعاً پاسخگو و بهینه برای نمایش تلفن همراه باشد، باید کمی کار بیشتری انجام دهید. خوشبختانه، چندین روش ساده برای تحقق آن وجود دارد.

روش 1: با کمی CSS سفارشی

ساده‌ترین راه استفاده از CSS برای ایجاد جاسازی‌های واکنش‌گرا، ایجاد کلاسی است که دارای ویژگی «نسبت ابعاد» باشد. این ویژگی به شما امکان می‌دهد نسبت ابعاد کلاسی را که ایجاد می‌کنید، تعیین کنید، به طوری که اندازه آن همیشه در یک ظرف در امتداد آن نسبت ابعاد تغییر می‌کند. با توجه به اینکه ویدیوهای قابل جاسازی یوتیوب همه با نسبت ابعاد 16×9 ارائه می‌شوند، این بدان معناست که می‌توانید از این ویژگی برای اطمینان از مقیاس‌بندی همه چیز استفاده کنید.

بیایید ببینیم روش یک چگونه کار می کند.

ابتدا یک کلاس مانند “youtube-video” ایجاد کنید. در مرحله بعد، نسبت ابعاد ویژگی را روی 16/9 با عرض 100٪ به آن بدهید.

.youtube-video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

سپس باید این کلاس را برای هر یوتیوبی که در کد جاسازی شده اعمال کنید، در حالی که شرط عرض و ارتفاع پیش‌فرض را حذف کنید.

این روش برای هر کسی که به راحتی CSS و HTML را ویرایش می کند بسیار ساده است. با این حال، برای هر جاسازی جداگانه YouTube به مقداری کار نیاز دارد. این کمتر از حد ایده آل است، به خصوص برای وب سایت هایی با چندین نویسنده و ویرایشگر که احتمالاً همه سعی می کنند ویدیوهای YouTube را در صفحات و پست ها جاسازی کنند.

روش 2: با بلوک های گوتنبرگ در تم های پاسخگو

برخی از تم های وردپرس، مانند Inspiro و ریسپانسیو، دارای ویژگی هایی هستند که پاسخگویی را برای جاسازی های ویدئویی خودکار می کنند. بنابراین اگر تمایل به تغییر تم و قالب‌های خود دارید، نصب یکی از این موارد بسیار ساده است. این مضامین دارای یک قانون CSS شبیه به روش یک هستند که در قالب قرار می گیرند. سپس این قانون بر روی بلوک‌های خاصی اعمال می‌شود و در درون موضوع نمایش داده می‌شود.

به عبارت دیگر: اگر از بلوک گوتنبرگ «ویدئو» استفاده کنید، جایی که URL ویدیوی YouTube را که می‌خواهید جاسازی کنید، جای‌گذاری می‌کنید، ویدیوهای شما پاسخگو باقی می‌مانند.

با این حال، ابتدا حتما این تم ها را با وب سایت خود آزمایش کنید. اجرای خاص ممکن است با ویدیوهای شما کاملاً کار نکند.

روش 3: با افزونه Yoast Video SEO

اگر از کاربران وردپرس هستید، ساده ترین و سریع ترین راه برای حل این مشکل، افزونه Yoast Video SEO است. جاوا اسکریپت علاوه بر خودکارسازی گنجاندن فراداده، که باعث رتبه‌بندی ویدیوهای شما در نتایج جستجوی Google می‌شود، به‌طور خودکار اندازه ویدیوی تعبیه‌شده را برای هر دستگاه و اندازه مرورگر تغییر می‌دهد. فراتر از اندازه ظرف، ویدیو ارتفاع و عرض خود را با مقیاس صفحه تنظیم می کند. بنابراین نیازی نیست نگران اجرای CSS سفارشی یا آزمایش خسته کننده مرورگر باشید!

علاوه بر این، افزونه Yoast Video SEO از جاوا اسکریپت ناهمزمان برای سرعت بخشیدن به زمان بارگذاری ویدیوهای YouTube تا حد امکان استفاده می کند. این تضمین می کند که ویدیوهای شما به بهترین شکل ممکن برای تضمین نرخ پخش بالا و تعامل ارائه می شوند. این افزونه ۷۹ دلار در سال است، نصب و راه‌اندازی آن فقط چند دقیقه طول می‌کشد و تضمین می‌کند که دیگر نیازی به نگرانی در مورد ویدیوهای واکنش‌گرا نباشید.

خلاصه

ویدیوها ابزاری عالی برای استفاده در وب سایت شما هستند. مردم آنها را دوست دارند! اما اگر آنها با بقیه سایت شما هماهنگ نباشند، ممکن است نامرتب به نظر برسند. خوشبختانه، راه‌های متعددی برای اطمینان از پاسخ‌گویی ویدیوهای تعبیه‌شده شما وجود دارد. یا با کمی CSS سفارشی یا با نصب یک افزونه مفید مانند Yoast Video SEO، می توانید مطمئن شوید که اندازه ویدیوهای YouTube خود به درستی تغییر می کند. همچنین می توانید تم خود را به تمی تغییر دهید که پاسخگوی خودکار ویدیویی دارد. در صورت داشتن هر گونه سوال یا پیشنهاد، لطفاً آنها را در نظرات مطرح کنید.

بیشتر بخوانید: یوتیوب در مقابل سایت خودتان: کدام یک برای سئو ویدیو بهتر است؟ »