تبلیغات
حراجی دامنه های ویژهمشاهده
تبلیغات
تبلیغات تبلیغات

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

CSS / HTML , آموزش طراحی , آموزش ها , مقالات,آموزش,ترفند

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

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

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

 

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

 

و اما آموزش :

برای این کار ابتدا باید کد زیر را در تگ داخل تگ 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%);
}

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

دانلود


هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >
مطلب مفیدی بود ؟

درخواست نصب

نویسنده : تیم محتوای 20اسکریپت 1 CSS / HTML , آموزش طراحی , آموزش ها , مقالات,آموزش,ترفند
لینک کوتاه مطلب : https://www.20script.ir/?p=13327
کلمات کلیدی پست :
مطالب مرتبط
3,388اسکریپت مدیریت اپلیکیشن ها myIgniter تاریخ : 2018/11/19
4,071اسکریپت دانلودر ویدیو از فیس بوک iDownloader تاریخ : 2016/04/26
7,480دانلود قالب اجاره خودرو Car Rental به صورت HTML تاریخ : 2016/06/13
4,832دانلود قالب وردپرس گیسون تاریخ : 2015/04/7
11,526اسکریپت حسابداری و مدیریت صورتحساب iBilling نسخه 4.2 تاریخ : 2016/07/27
5,020اسکریپت ایجاد شبکه اجتماعی Feral نسخه ۱.۲ تاریخ : 2015/01/7
10,982اسکریپت مدیریت محتوای دیتالایف انجین فارسی DataLife Engine نسخه 12.1 تاریخ : 2018/02/9
5,347خطای رایج Memory Exhausted و روش حل آن تاریخ : 2014/01/12
5,361دانلود پوسته انجمن Sentric برای بی بی پرس تاریخ : 2016/04/30
6,862اسکریپت راه اندازی شبکه اجتماعی SocialBuzz نسخه 1.4 تاریخ : 2016/07/17
4,684دانلود قالب میزبانی هاستینگ Liquid Host برای Whmcs تاریخ : 2015/04/7
7,046اسکریپت مدیریت محتوای qEngine تاریخ : 2017/09/18
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب
تبلیغات
تبلیغات