Responsive Web Design – Videos

البته! این هم ترجمه فارسی راهنمای «طراحی وب واکنش‌گرا برای ویدیوها»:

واکنش‌گرا کردن ویدیوها در طراحی وب

چرا؟

ویدیوهایی که در وب‌سایت قرار می‌گیرند معمولاً اندازه ثابتی دارند. در صفحه‌نمایش‌های کوچک مثل موبایل، این ویدیوها ممکن است از صفحه بیرون بزنند یا ظاهر مناسبی نداشته باشند. ویدیوهای واکنش‌گرا به طور خودکار اندازه‌شان را متناسب با صفحه تنظیم می‌کنند و نسبت تصویر را حفظ می‌کنند.

روش‌های رایج برای واکنش‌گرایی ویدیوها:

۱. استفاده از جعبه نسبت تصویر با ترفند padding-bottom

این روش کلاسیک، نسبت تصویر ویدیو (معمولاً ۱۶:۹) را حفظ می‌کند و اجازه می‌دهد اندازه ویدیو به صورت روان تغییر کند.

<div class=“video-container”>
<iframe src=“https://www.youtube.com/embed/XYZ” frameborder=“0” allowfullscreen></iframe>
</div>

.video-container {
position: relative;
padding-bottom: 56.25%; /* نسبت 16:9 (9 تقسیم بر 16 برابر با 0.5625) */
height: 0;
overflow: hidden;
max-width: 100%;
background: #000;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
}

به جعبه یک padding-bottom با نسبت تصویر داده می‌شود.

• ویدیو یا iframe به صورت مطلق روی آن قرار می‌گیرد و کل جعبه را می‌پوشاند.
• این باعث می‌شود نسبت تصویر حفظ و اندازه ویدیو متناسب شود.

۲. استفاده از خاصیت جدید CSS به نام aspect-ratio

مرورگرهای جدید این قابلیت را دارند که نسبت تصویر را به صورت مستقیم کنترل کنند:

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

.video-container iframe {
width: 100%;
height: 100%;
border: none;
}

با این روش، دیگر نیازی به ترفند padding نیست و مرورگر خودش نسبت تصویر را حفظ می‌کند.

۳. ویدیوهای HTML5 با تگ <video>

برای ویدیوهایی که خودتان روی سرور دارید:

<div class=“video-container”>
<iframe src=“https://www.youtube.com/embed/XYZ” frameborder=“0” allowfullscreen></iframe>
</div>

.video-container {
position: relative;
padding-bottom: 56.25%; /* نسبت 16:9 (9 تقسیم بر 16 برابر با 0.5625) */
height: 0;
overflow: hidden;
max-width: 100%;
background: #000;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
}

خلاصه

• ویدیوی خود را داخل یک جعبه div قرار دهید.
• با CSS نسبت تصویر را حفظ کنید و عرض را سیال (fluid) تنظیم کنید.
• از ترفند padding-bottom یا خاصیت aspect-ratio استفاده کنید.
• به ویدیو یا iframe عرض ۱۰۰٪ و ارتفاع مناسب بدهید.