🔹 مشکل نمایش ویدیو در طراحی واکنش‌گرا

وقتی ویدیو رو با تگ <video> یا <iframe> (مثل یوتیوب یا آپارات) قرار می‌دیم، معمولاً اندازه‌ی ثابت دارن.
این باعث میشه در موبایل یا تبلت درست نمایش داده نشن.

🔹 استفاده از max-width: 100%

مثل تصاویر، برای ویدیو هم می‌تونیم حداکثر عرض رو ۱۰۰٪ تنظیم کنیم.

<video controls style="max-width:100%; height:auto;">
  <source src="movie.mp4" type="video/mp4">
  مرورگر شما از ویدیو پشتیبانی نمی‌کند.
</video>

✅ ویدیو با اندازه صفحه هماهنگ میشه و از کادر بیرون نمیزنه.

🔹 ویدیوهای جاسازی شده (مثل یوتیوب)

برای iframeها هم میشه از یک container واکنش‌گرا استفاده کرد.

<div style="position:relative; padding-bottom:56.25%; height:0; overflow:hidden;">
  <iframe src="https://www.youtube.com/embed/example" 
          style="position:absolute; top:0; left:0; width:100%; height:100%;" 
          frameborder="0" allowfullscreen></iframe>
</div>

📌 در اینجا نسبت 16:9 حفظ میشه و iframe توی هر نمایشگری درست جا میشه.

🔹 نکته مهم

• همیشه controls رو برای دسترسی بهتر بذار.

• اگه حجم ویدیو زیاده، بهتره از استریمینگ (YouTube, Aparat, Vimeo) استفاده کنی.

• برای سرعت بهتر، ویدیوها رو با فرمت‌های سبک‌تر مثل MP4 (H.264) یا WebM ذخیره کن.