آموزش قراردادن ویدیو در پس زمینه با html5 و css در وب
Your browser doesn't support video.
Please download the file: video/mp4
پیش نیازهای لازم
نکات مهم
- در انتخاب ویدیو نهایت دقت را داشته باشید. ویدیو شما حتما با موضوع سایت شما ارتباط داشته باشد و موجب به هم ریختن ذهن کاربر نشود.
- از ویدیو با کیفیت و حتی الامکان با حجم پایین استفاده کنید. هنگام پایین آوردن حجم ویدیو دقت کنید که کیفیت آن پایین نرود.
- در صورت امکان ویدیو را در هاست دیگری آپلود کنید تا از ترافیک سایت شما استفاده نشود.
- از پسوندهای رایج که وب آن هارا پشتیبانی می کند استفاده کنید.
قرار دادن ویدیو در زمینه سایت
<video class="video" autoplay muted loop>
<source src="videos/myVideo.MP4" type="video/mp4">
</video>
همانطور که می دانید در HTML5 با استفاده از تگ <video> می توانید انواع ویدیوهای مجاز وب را در صفحه وب نمایش دهید. در اینجا خصوصیات زیر را برای این تگ در نظر گرفته ایم تا ویدیو مورد نظر در پس زمینه به صورت استاندارد نمایش داده شود.
- autoplay: این خصوصیت برای اجرای خودکار ویدیو پس از بارگزاری صفحه فعال شده است.
- muted: این خصوصیت جهت نمایش ویدیو به صورت بی صدا فعال شده است.
- loop: این خصوصیت جهت تکرار مجدد ویدیو پس از اتمام آن در نظر گرفته شده است.
محتوای صفحه
<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 مشخص شده است به این شکل عمل می کنیم:
.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,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 در نظر گرفته ایم.
@media (max-width: 767px) {
body {
background: red;
}
.video {
display: none;
}
}
نظرات کاربران