آموزش اجرای فیلم در پس زمینه وب سایت توسط 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"

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

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

اطلاعیه های سایت...

این چیست؟

تخفیف 30 درصدی محصولات وردپرس به مناسبت ماه مبارک رمضان

کد تخفیف : ramazan97

ورود به فروشگاه