در نتیجه، برای اینکه یک YouTube Embed واقعاً پاسخگو و بهینه برای نمایش تلفن همراه باشد، باید کمی کار بیشتری انجام دهید. خوشبختانه، چندین روش ساده برای تحقق آن وجود دارد.
روش 1: با کمی CSS سفارشی
.youtube-video {
aspect-ratio: 16 / 9;
width: 100%;
}با این حال، ابتدا حتما این تم ها را با وب سایت خود آزمایش کنید. اجرای خاص ممکن است با ویدیوهای شما کاملاً کار نکند.
روش 3: با افزونه Yoast Video SEO
برخی از تم های وردپرس، مانند الهام بخش و پاسخگو، دارای ویژگی هایی است که پاسخگویی را برای جاسازی های ویدیو به طور خودکار انجام می دهد. بنابراین اگر تمایل به تغییر تم و قالب‌های خود دارید، نصب یکی از این موارد بسیار ساده است. این مضامین دارای یک قانون CSS شبیه به روش یک هستند که در قالب قرار می گیرند. سپس این قانون بر روی بلوک‌های خاصی اعمال می‌شود و در درون موضوع نمایش داده می‌شود.
علاوه بر این، افزونه Yoast Video SEO از جاوا اسکریپت ناهمزمان برای سرعت بخشیدن به زمان بارگذاری ویدیوهای YouTube تا حد امکان استفاده می کند. این تضمین می کند که ویدیوهای شما به بهترین شکل ممکن برای تضمین نرخ پخش بالا و تعامل ارائه می شوند. این افزونه ۷۹ دلار در سال است، نصب و راه‌اندازی آن فقط چند دقیقه طول می‌کشد و تضمین می‌کند که دیگر نیازی به نگر، در مورد ویدیوهای واکنش‌گرا نباشید.
خلاصه
به عبارت دیگر: اگر از بلوک گوتنبرگ «ویدئو» استفاده کنید، جایی که URL ویدیوی YouTube را که می‌خواهید جاسازی کنید، جای‌گذاری می‌کنید، ویدیوهای شما پاسخگو باقی می‌مانند.
تعبیه‌های استاندارد YouTube، مانند موارد زیر، از iFrames برای تولید یک پخش‌کننده ویدیوی جاسازی شده استفاده می‌کنند:
این روش برای هر ،ی که به راحتی CSS و HTML را ویرایش می کند بسیار ساده است. با این حال، برای هر جاسازی جداگانه YouTube به مقداری کار نیاز دارد. این کمتر از حد ایده آل است، به خصوص برای وب سایت هایی با چندین نویسنده و ویرایشگر که احتمالاً همه سعی می کنند ویدیوهای YouTube را در صفحات و پست ها جاسازی کنند.
روش 2: با بلوک های گوتنبرگ در تم های پاسخگو
ساده‌ترین راه استفاده از CSS برای ایجاد جاسازی‌های واکنش‌گرا، ایجاد ک،ی است که دارای ویژگی «نسبت ابعاد» باشد. این ویژگی به شما امکان می‌دهد نسبت ابعاد ک،ی را که ایجاد می‌کنید، تعیین کنید، به طوری که اندازه آن همیشه در یک ظرف در امتداد آن نسبت ابعاد تغییر می‌کند. با توجه به اینکه ویدیوهای قابل جاسازی یوتیوب همه با نسبت ابعاد 16×9 ارائه می‌شوند، این بدان م،است که می‌تو،د از این ویژگی برای اطمینان از مقیاس‌بندی همه چیز استفاده کنید.
ویدیوها ابزاری عالی برای استفاده در وب سایت شما هستند. مردم آنها را دوست دارند! اما اگر آنها با بقیه سایت شما هماهنگ نباشند، ممکن است نامرتب به نظر برسند. خوشبختانه، راه‌های متعددی برای اطمینان از پاسخگویی ویدیوهای تعبیه‌شده شما وجود دارد. یا با کمی CSS سفارشی یا با نصب یک افزونه مفید مانند Yoast Video SEO، می تو،د مطمئن شوید که اندازه ویدیوهای YouTube خود به درستی تغییر می کند. همچنین می تو،د تم خود را به تمی تغییر دهید که پاسخگوی خودکار ویدیویی دارد. در صورت داشتن هر گونه سوال یا پیشنهاد، لطفاً آنها را در نظرات مطرح کنید.
اما یک نقطه ضعف نیز وجود دارد. استفاده از iFrames می تواند بارگذاری ویدیوهای YouTube را در هر صفحه ای کندتر کند. همچنین ممکن است به این م،ی باشد که ویدیوها همیشه در اولین رنگ قابل مشاهده نیستند، زیرا یک مرورگر قبل از اینکه بتواند ویدیو را بارگیری کند باید iFrame را پیدا کرده و بارگذاری کند. در نهایت، و ناامیدکننده‌تر، بدون CSS یا جاوا اسکریپت، یک راه بومی برای تطبیق ویدیوهای YouTube با یک ظرف وجود ندارد. به همین دلیل است که embed یک اندازه (به طور پیش فرض 560 x 315) را مشخص می کند.
مزیت استفاده از آی فریم؟ این یک قطعه ساده از HTML است. به علاوه، به جاسازی‌های YouTube اجازه می‌دهد تا با گسترده‌ترین انتخاب ممکن از موارد استفاده، برنامه‌ها و سیستم‌های مدیریت محتوا سازگار باشند. یوتیوب همچنین می‌تواند جاسازی‌های ویدیوی موجود را با سبک‌های پخش‌کننده جدید یا اسکریپت‌های تبلیغاتی از سمت سرور به‌روزرس، کند، بدون اینکه کاربران مجبور شوند کد وب‌سایت‌هایشان را تغییر دهند. این کار به این دلیل کار می کند که یک iFrame اساساً به ،وان پنجره ای به یک صفحه دیگر عمل می کند.
بیشتر بخو،د: یوتیوب در مقابل سایت خودتان: کدام یک برای سئو ویدیو بهتر است؟ »
هنگام جاسازی یک ویدیوی YouTube در وب سایت خود، احتمالاً یک مشکل جزئی اما بسیار آزاردهنده را کشف کرده اید: جاسازی های YouTube به طور بومی پاسخگو نیستند. این بدان م،است که برای مثال وقتی صفحه وب خود را در دستگاه تلفن همراه مشاهده می کنید، اندازه ویدیو با بقیه ،اصر صفحه به درستی تغییر نمی کند. این می تواند بر طراحی و قابلیت استفاده وب سایت شما تأثیر منفی بگذارد. پس چرا این اتفاق می افتد و چه کاری می تو،د در مورد آن انجام دهید؟
چرا ویدیوهای YouTube پاسخگو نیستند
<iframe cl،="youtube-video" src=" ،le="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>سپس باید این ک، را برای هر یوتیوبی که در کد جاسازی شده اعمال کنید، در حالی که شرط عرض و ارتفاع پیش‌فرض را حذف کنید.
ابتدا یک ک، مانند “youtube-video” ایجاد کنید. در مرحله بعد، نسبت ابعاد ویژگی را روی 16/9 با عرض 100٪ به آن بدهید.
اگر از کاربران وردپرس هستید، ساده ترین و سریع ترین راه برای حل این مشکل، افزونه Yoast Video SEO است. جاوا اسکریپت علاوه بر خودکارسازی گنجاندن فراداده، که باعث رتبه‌بندی ویدیوهای شما در نتایج جستجوی Google می‌شود، به‌طور خودکار اندازه ویدیوی تعبیه‌شده را برای هر دستگاه و اندازه مرورگر تغییر می‌دهد. فراتر از اندازه ظرف، ویدیو ارتفاع و عرض خود را با مقیاس صفحه تنظیم می کند. بنابراین نیازی نیست نگران اجرای CSS سفارشی یا آزمایش خسته کننده مرورگر باشید!
فیل ناتینگهام یک استراتژیست بازاریابی است که در سئو ویدیو و استراتژی برند و بهینه سازی موتور جستجو تخصص دارد.
منبع: https://yoast.com/،w-to-make-youtube-videos-responsive/
