شاید شما هم در برحی از وب سایت های خارجی و یا ایرانی دیده باشید که به جای درج عکس و یا رنگ در پس زمینه وب سایت , از یک ویدئو استفاده میکنند .
طبیعتا این کار به دلیل حجم بالای فیلم ها پیشنهاد نمیشود . اما میتونید از یک تکه فیلم قابل تکرار استفاده نمایید که هم دارای حجم کمتری خواهد بود و هم ما رو به هدفمان خواهند رساند .
برای این ساعت از سایت بیست اسکریپت قصد دارم آموزش این کار را در اختیار شما عزیزان قرار دهم .
و اما آموزش :
برای این کار ابتدا باید کد زیر را در تگ داخل تگ body قرار دهید . (ترجیحا در ابتدای تگ باز شونده body )
[php]</div>
<div data-settings=" minimize scroll-mouseover"><video autoplay loop id="vmsVideo">
<source src="آدرس فیلم.mp4" type="video/mp4">
</video></div>
<div data-settings=" minimize scroll-mouseover">[/php]
توجه : حتما باید فیلم با پسوند mp4 باشد . ( به دلیل پشتیبانی تمامی مرورگر ها از این پسوند )
حال میبایست کد زیر را در css خود قرار دهید
[php]</div>
<div data-settings=" minimize scroll-mouseover">video#vmsVideo {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}</div>
<div data-settings=" minimize scroll-mouseover">[/php]
در باکس دانلود می توانید هم دمو را دریافت کنید و هم آن را به صورت آنلاین مشاهده فرمایید.
بدون دیدگاه