آموزش قراردادن ویدیو در پس زمینه با html5 و css در وب

1397/1/19 علیرضا حاتمی نیا 1823

 

با سلام خدمت شما علاقه مندان به آموزش های برنامه نویسی و آموزش طراحی سایت در خدمت شما هستم با یک آموزش ویژه دیگر از وبسایت ilikephp.ir
در آموزش ویژه امروز قصد داریم تا با نحوه قراردادن ویدیو در بکگراند صفحه وب آشنا شویم. شاید به تازگی بعضی از وبسایتهای مدرن را دیده باشید که به جای استفاده از تصاویر در بکگراند وبسایت خود از ویدیو یا فیلم استفاده می کنند. این کار علاوه بر زیبایی می تواند مفهوم فعالیت کاری صفحه را نیز به مراتب بالاتر ببرد. این آموزش نیاز به دانش بسیار بالا در HTML  و CSS ندارد و شما می توانید به آسانی این تکنیک را یاد بگیرید. پس با ما همراه باشید.

پیش نیازهای لازم

برای قرار دادن یک ویدیو در پس زمینه صفحه وب نیاز به مهارت های خاصی ندارید. فقط کافیست با مباحث HTML5 و CSS3 تا حدی آشنایی داشته باشید.

نکات مهم

قبل از شروع آموزش به عنوان یک طراح سایت سعی کنید نکات زیر را در اتخاب و به کاربردن ویدیو مورد نظر نهایت دقت را بعمل آورید تا  بازدهی مناسبی برای شما داشته باشد.
  1. در انتخاب ویدیو نهایت دقت را داشته باشید. ویدیو شما حتما با موضوع سایت شما ارتباط داشته باشد و موجب به هم ریختن ذهن کاربر نشود.
  2. از ویدیو با کیفیت و حتی الامکان با حجم پایین استفاده کنید. هنگام پایین آوردن حجم ویدیو دقت کنید که کیفیت آن پایین نرود.
  3. در صورت امکان ویدیو را در هاست دیگری آپلود کنید تا از ترافیک سایت شما استفاده نشود.
  4. از پسوندهای رایج که وب آن هارا پشتیبانی می کند استفاده کنید.

قرار دادن ویدیو در زمینه سایت

بسیار خب آموزش را شروع می کنیم. ابتدا در صفحه وب توسط HTML5 ویدیو مورد نظر را قرار می دهیم.
HTML
<video class="video" autoplay muted loop>
   <source src="videos/myVideo.MP4" type="video/mp4">
</video>
همانطور که می دانید در HTML5 با استفاده از تگ <video> می توانید انواع ویدیوهای مجاز وب را در صفحه وب نمایش دهید. در اینجا خصوصیات زیر را برای این تگ در نظر گرفته ایم تا ویدیو مورد نظر در پس زمینه به صورت استاندارد نمایش داده شود.
  • autoplay:  این خصوصیت برای اجرای خودکار ویدیو پس از بارگزاری صفحه فعال شده است.
  • muted: این خصوصیت جهت نمایش ویدیو به صورت بی صدا فعال شده است. 
  • loop: این خصوصیت جهت تکرار مجدد ویدیو پس از اتمام آن در نظر گرفته شده است.

محتوای صفحه

محتوایی که قرار است در صفحه نمایش داده شود شما یک <div> با کلاس content است که درون آن یک تگ <h1> و یک پاراگراف با تگ <p> می باشد.
HTML
<div class="content">
   <h1>this is my content</h1>
   <p>
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt vero perferendis impedit ipsum obcaecati esse blanditiis eveniet, aliquam magni. Culpa molestias deserunt magni nostrum, voluptatum accusamus animi adipisci tenetur consequatur maiores asperiores soluta, architecto tempora corrupti hic repellendus itaque vitae ut cumque nisi officia alias obcaecati iusto velit. Nemo iure quaerat, similique eos libero maxime delectus velit distinctio impedit esse, q 
</div>
بسیار خب حالا کدهای مربوط به css را می نویسیم. برای تگ <video> که با کلاس video مشخص شده است به این شکل عمل می کنیم: 
CSS
.video {
    position: fixed;
    top: 50%;
    left: 50%; 
    transform: translate(-50%,-50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 1;
}
در کدهای بالا ابتدا مقدار position را برابر fixed قرار دادیم تا در صفحه ثابت بماند و با اسکرول صفحه جابه جا نشود. سپس توسط خصوصیات top  و left نقطه چپ و بالای ویدیوی را در مرکز صفحه قرار دادیم و توسط transform ویدیو را به طور کامل در مرکز صفحه قرار می دهیم. توسط min-width و min-height تصویر را برابر کل صفحه قرار می دهیم. همچنین z-index را برابر 1 قرار می دهیم تا این عنصر در زیر تمامی عناصر دیگر قرار گیرد. البته به شرطی که این مقدار برای عناصر دیگر بالاتر از 1 می شود.
بسیار خب حال عناصر دیگر را استایل دهی می کنیم.
HTML
html,body,div, h1, p, a,video, h2{
    z-index: 2;
    position: relative;
}
.content {
    z-index: 2;
    position: relative;
    max-width: 700px;
    margin: 0 auto;
    
    color: #e9e9e9;
}
h1 {
    color: #ffffff;
}
بسیار خب. تنها نکته مورد توجه در کدهای بالا این است که مقدار z-index را برای دیگر عناصر بیشتر از 1 در نظر گرفته ایم.
دقت کنید که مرورگرها ویدیوها را در موبایل بدون کنترلرها نمایش نمی دهند. پس بهترین کار این است که به جای ویدیو یک تصویر را به عنوان تصویر پس زمینه انتخاب کنیم.
CSS
@media (max-width: 767px) {
    body {
        background: red;
    }
    .video {
        display: none;
    }
}