آیا می دانستید سایت تیک آنلاین دارای 882 مطلب مفید و 108103 کاربر می باشد !

آموزش اجرای فیلم در پس زمینه وب سایت توسط Html5 و CSS3
نویسنده : محمدرضا خوشبین
دسته بندی : آموزش ها
24 آذر 1394
امتیاز دهید : +1
با سلام شاید شما هم در برحی از وب سایت های خارجی و یا ایرانی دیده باشید که به جای درج عکس و یا رنگ در پس زمینه وب سایت , از یک ویدئو استفاده میکنند .
طبیعتا این کار به دلیل حجم بالای فیلم ها پیشنهاد نمیشود . اما میتونید از یک تکه فیلم قابل تکرار استفاده نمایید که هم دارای حجم کمتری خواهد بود و هم ما رو به هدفمان خواهند رساند .
 

 

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

 


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

	


 توجه : حتما باید فیلم با پسوند 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%);
		}

	 
	

 


تگ مطلب : آموزش اجرای فیلم در پس زمینه وب سایت توسط Html5 و CSS3, آموزش طراحی وب, آموزش طراحی قالب, گذاشتن فیلم در بکگراند, فیلم پس زمینه
کانال تلگرام تیک آنلاین : اطلاع از آخرین اخبار و هر آنچه یک وبمستر نیاز دارد ...جهت عضویت رو لینک کلیک کنید عضویت در کانال
telegram

تبلیغات

پنل کاربری

موضوعات سایت

آمار سایت


  • کاربران عضو : ( 0 )
  • کاربران مهمان : ( 15 )
  • ربات ها : ( 2 )
  • مجموع آنلاین ها: ( 17 )

بازدید امروز :
5449
بازدید دیروز :
13177

تبلیغات متنی

طراحی سایت در کرج

www.Groupdesign.ir

ساندویچ پانل سقفی

www.sandwich-panelmammut.com

هات تپ صنعت

www.Hottapsanat.com

هات تپ ایران

www.Hottapiran.com

هات تپ

www.Hottapco.ir

هات تپ کاران

www.Hottapkaran.com

قیمت ساندویچ پانل

www.mammoth-panel.com

ساندویچ پانل

www.sandewichpanel.com

ساندویچ پنل ماموت

www.mammoth-panel.com