آموزش اجرای فیلم در پس زمینه وب سایت توسط Html5 و CSS3

شاید شما هم در برحی از وب سایت های خارجی و یا ایرانی دیده باشید که به جای درج عکس و یا رنگ در پس زمینه وب سایت , از یک ویدئو استفاده میکنند .

طبیعتا این کار به دلیل حجم بالای فیلم ها پیشنهاد نمیشود . اما میتونید از یک تکه فیلم قابل تکرار استفاده نمایید که هم دارای حجم کمتری خواهد بود و هم ما رو به هدفمان خواهند رساند .

برای این ساعت از سایت وب نما قصد دارم آموزش این کار را در اختیار شما عزیزان قرار دهم .

video-for-backgroud-by-20script

و اما آموزش :

برای این کار ابتدا باید کد زیر را در تگ داخل تگ body قرار دهید . (ترجیحا در ابتدای تگ باز شونده body )

<video autoplay loop id="vmsVideo">
    <source src="آدرس فیلم.mp4" type="video/mp4">
</video>

توجه : حتما باید فیلم با پسوند mp4 باشد . (  به دلیل پشتیبانی تمامی مرورگر ها از این پسوند )

حال میبایست کد زیر را در css خود قرار دهید

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%);
}

در باکس دانلود می توانید دمو را دریافت کنید و مشاهده فرمایید.

 

به زودی در این مکان تب زیبا برای لینک های دانلود قرار میگیرد

دانلود دمو با لینک مستقیم 1 مگابایت

منبع : webnma.com

خشایار توکلی

وب نما با هدف ایجاد یک مرجع کامل در زمینه آموزش وردپرس ، افزونه وردپرس و قالب وردپرس از سال 1394 پا به عرصه وب گذاشت. ما در وب نما سعی می کنیم همواره به نیاز های شما کاربران عزیز در زمینه وردپرس فارسی پاسخ دهیم.قصد داریم به شما کمک کنیم تا سایتی پر قدرت راه اندازی کنید و تبدیل به مشتری همیشگی ما شوید.

اضافه کردن دیدگاه

تماس با ما

جهت تماس با مدیر وب سایت با شماره 09307957745 در تماس باشید یا به این ایمیل webnma.com@gmail.com پیام دهید