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

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

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

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

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

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

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

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

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

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

<iframe class="youtube-video" src="https://www.youtube.com/embed/5kW0RtcJZC8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

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

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

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

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

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

فیل ناتینگهام یک استراتژیست بازاریابی است که در سئو ویدیو و استراتژی برند و بهینه سازی موتور جستجو تخصص دارد.