آموزش اجرای فیلم در پس زمینه وب سایت توسط Html5 و CSS3
نویسنده : محمدرضا خوشبین
دسته بندی : آموزش ها
امتیاز دهید : +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 )
  • کاربران مهمان : ( 33 )
  • ربات ها : ( 1 )
  • مجموع آنلاین ها: ( 34 )

بازدید امروز :
4717
بازدید دیروز :
10759

دیگر سایت های ما