قرار دادن ویدیو در بک گراند سایت

قرار دادن ویدیو در بک گراند سایت

شاید در بعضی سایت‌ها دیده باشید که در بَک‌گراندشان ویدیویی در حال پخش وجود دارد؛ این کار ممکن است جذابیت خاصی به آن سایت داده باشد و از این رو شما نیز بخواهید در سایت خود چنین کاری را انجام دهید. پس در ادامه با فول‌کده همراه باشید.

آموزش انجام کار

ما از HTML5 و CSS برای انجام این کار استفاده خواهیم کرد.

کد HTML:

<video loop muted autoplay poster="images/fullkade_bg.jpg" class="fullscreen-bg__video">
        <source src="video/bg.webm" type="video/webm">
        <source src="video/bg.mp4" type="video/mp4">
        <source src="video/bg.ogv" type="video/ogg">
    </video>
</div>

• در این‌جا، ویژگی‌های پخش خودکار، حالت بی‌صدا و تکرار ویدیو را هم قرار داده‌ایم. (loop, muted, autoplay)
• ویژگی pooster عکسی را که قبل از لود شدن فیلم نمایش داده می‌شود تعیین می‌کند.
  حتما این عکس را قرار دهید تا اگر مشکلی در لود شدن فیلم به وجود آمد، حداقل تصویری وجود داشته باشد.
• هم‌چنین سه فرمت mp4، webm و ovg را نیز قرار دادیم تا برای مرورگرهای مختلف بهینه شده باشد. می‌توانید فقط یک فرمت را قرار دهید.

کد استایل سی اس اس:

.fullscreen-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}
 
.fullscreen-bg__video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
	    transform: translate(-50%, -50%);
}
 
@media (max-width: 767px) {
    .fullscreen-bg {
        background: url('img/videoframe.jpg') center center / cover no-repeat;
    }
 
    .fullscreen-bg__video {
        display: none;
    }
}

• استایل های فوق با اینترنت اکسپلورر 8 سازگار نیستند و البته این قضیه زیاد هم مهم نیست! 😀
• اگر به استایل دقت کنید، می‌بینید که برای دیوایس‌های دارای عرض کم‌تر از 768 پیکسل، ویدیو را مخفی کرده‌ایم و به جای آن، تصویر را نمایش داده‌ایم.
  چون در بسیاری از موبایل‌ها، ویدیوها به صورت اتوماتیک پخش نمی‌شوند و به جای پخش اتوماتیک، یک دکمه جهت پلی کردن ویدیو به نمایش در می‌آید که این مسئله در نحوه‌ی نمایش سایت تاثیر منفی خواهد داشت.
  البته با جاوا اسکریپت می‌توان این مشکل را حل کرد.
• دلیل z-index برابر -100 یا منفی 100 این است تا هر عنصر دیگری را که بعدا قرار می‌دهید، یقین داشته باشید که روی ویدیو قرار خواهند گرفت.
  در واقع چینش آن در محور z یا عمق صفحه نمایش را مشخص کرده‌ایم و یک مقدار خیلی پایین داده‌ایم تا مشکلی پیش نیاید.
  این مقدار به صورت پیش‌فرض روی 0 قرار دارد.