رتبه موضوع:
  • 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
آموزش قراردادن ویدیو در پس زمینه با html5 و css در وب
#1
Lightbulb 
در آموزش امروز قصد داریم تا با نحوه قراردادن ویدیو در بکگراند صفحه وب آشنا شویم. شاید به تازگی بعضی از وبسایتهای مدرن را دیده باشید که به جای استفاده از تصاویر در بکگراند وبسایت خود از ویدیو یا فیلم استفاده می کنند. این کار علاوه بر زیبایی می تواند مفهوم فعالیت کاری صفحه را نیز به مراتب بالاتر ببرد. این آموزش نیاز به دانش بسیار بالا در HTML و CSS ندارد و شما می توانید به آسانی این تکنیک را یاد بگیرید. 

برای قرار دادن یک ویدیو در پس زمینه صفحه وب نیاز به مهارت های خاصی ندارید. فقط کافیست با مباحث HTML5 و CSS3 تا حدی آشنایی داشته باشید.


در آموزش امروز قصد داریم تا با نحوه قراردادن ویدیو در بکگراند صفحه وب آشنا شویم. شاید به تازگی بعضی از وبسایتهای مدرن را دیده باشید که به جای استفاده از تصاویر در بکگراند وبسایت خود از ویدیو یا فیلم استفاده می کنند. این کار علاوه بر زیبایی می تواند مفهوم فعالیت کاری صفحه را نیز به مراتب بالاتر ببرد. این آموزش نیاز به دانش بسیار بالا در HTML و CSS ندارد و شما می توانید به آسانی این تکنیک را یاد بگیرید. 

برای قرار دادن یک ویدیو در پس زمینه صفحه وب نیاز به مهارت های خاصی ندارید. فقط کافیست با مباحث HTML5 و CSS3 تا حدی آشنایی داشته باشید.

کد HTML:

این قسمت تنها برای کاربران قابل مشاهده می باشد


همانطور که می دانید در HTML5 با استفاده از تگ <video> می توانید انواع ویدیوهای مجاز وب را در صفحه وب نمایش دهید. در اینجا خصوصیات زیر را برای این تگ در نظر گرفته ایم تا ویدیو مورد نظر در پس زمینه به صورت استاندارد نمایش داده شود.


  • autoplay: این خصوصیت برای اجرای خودکار ویدیو پس از بارگزاری صفحه فعال شده است.

  • muted: این خصوصیت جهت نمایش ویدیو به صورت بی صدا فعال شده است.

  • loop: این خصوصیت جهت تکرار مجدد ویدیو پس از اتمام آن در نظر گرفته شده است.


محتوای صفحه



محتوایی که قرار است در صفحه نمایش داده شود شما یک <div> با کلاس content است که درون آن یک تگ <h1> و یک پاراگراف با تگ <p> می باشد.
HTML

این قسمت تنها برای کاربران قابل مشاهده می باشد

بسیار خب حالا کدهای مربوط به css را می نویسیم. برای تگ <video> که با کلاس video مشخص شده است به این شکل عمل می کنیم: 

این قسمت تنها برای کاربران قابل مشاهده می باشد
در کدهای بالا ابتدا مقدار position را برابر fixed قرار دادیم تا در صفحه ثابت بماند و با اسکرول صفحه جابه جا نشود. سپس توسط خصوصیات top و left نقطه چپ و بالای ویدیوی را در مرکز صفحه قرار دادیم و توسط transform ویدیو را به طور کامل در مرکز صفحه قرار می دهیم. توسط min-width و min-height تصویر را برابر کل صفحه قرار می دهیم. همچنین z-index را برابر 1 قرار می دهیم تا این عنصر در زیر تمامی عناصر دیگر قرار گیرد. البته به شرطی که این مقدار برای عناصر دیگر بالاتر از 1 می شود.

بسیار خب حال عناصر دیگر را استایل دهی می کنیم.


این قسمت تنها برای کاربران قابل مشاهده می باشد
بسیار خب. تنها نکته مورد توجه در کدهای بالا این است که مقدار z-index را برای دیگر عناصر بیشتر از 1 در نظر گرفته ایم.

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

این قسمت تنها برای کاربران قابل مشاهده می باشد

با ارزوی موفقیت برای همه دوستان 
امید وارو مفید واقع شده باشیم.


انجمن وردمیوز ::::::::: wp-mu.ir :::::::::  منبع آموزشی رایگان ::::::: راحل ، ایده ، افزونه ها و پوسته های جدید وردپرس ::::::: انجمن تخصصی وردپرس شبکه


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان