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

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

بازگشت

به جایی که از آن میآیید
Want create site? Find Free WordPress Themes and plugins.

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

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

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

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

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

 

Did you find apk for android? You can find new Free Android Games and apps.

دانلود فایل های مطلب

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

با عضویت در کانال تلگرامی وب نما از آخرین مطالب آموزشی محصولات اطلاعیه ها . تخفیف ها و ... مطلع شوید

همین حالا عضو میشم

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *