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





وینگو مارکت
تبلیغات
تبلیغات
تبلیغات تبلیغات
تبلیغات تبلیغات

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

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

این محتوا چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید.

میانگین رتبه 1 / 5. تعداد رای : 1

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

دانلود

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

خرید ارز
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 1 CSS / HTML , آموزش طراحی , آموزش ها , مقالات,آموزش,ترفند
لینک کوتاه مطلب : https://www.20script.ir/?p=13327
کلمات کلیدی پست :
مطالب مرتبط
25,747افزونه ایجاد کتاب های الکترونیک سه بعدی در وردپرس dFLIP نسخه 1.3.3 تاریخ : 2017/11/28
11,072دانلود اسکریپت تبادل شبکه های اجتماعی PES pro تاریخ : 2014/01/7
51,207دانلود قالب پورتو Porto فارسی نسخه 5.4.1 – پوسته فروشگاهی برای وردپرس تاریخ : 2020/07/9
2,284اسکریپت پلتفرم تولید محتوا با هوش مصنوعی MagicAI تاریخ : 2025/02/21
20,247راه اندازی سایت داستان های تصویری با اسکریپت My Manga Reader تاریخ : 2017/08/29
24,427اسکریپت خدماتی ایجاد نظرسنجی حرفه ای Pro Polls تاریخ : 2017/10/11
14,737آموزش گام به گام HTML5 تاریخ : 2016/10/28
16,596آموزش وردپرس افزودن ابزارک به قالب وردپرس تاریخ : 2015/02/22
34,737اسکریپت تبلیغات رایگان ایستگاه تاریخ : 2014/05/16
12,890منو های بسیار خوشگل و رنگارنگ تاریخ : 2014/01/6
13,076افزونه وردپرس جستجو و معرفی خدمات شهری Directory Pro تاریخ : 2019/07/22
26,000قالب بسیار زیبا پرتو برای Freer تاریخ : 2013/11/22
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب