پارس وردپرس

تماس با پشتیبانی

0969 704 0911

6018 822 0935

parswp@yahoo.com

صفحه نخست
قوانین
تعرفه تبلیغات
پرداخت آنلاین
درباره ما
تماس با ما
    • سبد خریدتان خالی است.
  • سبد خرید

    محصولات انتخاب شده : 0

    قیمت کل : 0 ریال

    منوی اصلی

    کد امنیتی : 3 + 5

    گروه طراحی پارس وردپرس در سال 1390 فعالیت خود را در زمینه طراحی وبسایت های تفریحی ، خبری و … با استفاده از وردپرس آغاز نمود .

    مشتری محور بودن یکی از اساسی ترین اصول در نظر گروه طراحی پارس وردپرس می باشد . گروه طراحی پارس وردپرس متشکل از حرفه ای ترین افراد در زمینه های برنامه نویسی تحت وب ، تحلیل پروژه ، گرافیک و … است که همواره در تمامی مراحل پروژه در کنار شما خواهند بود .

    طراحی فیدخوان و سایت های خبری تحت وب یکی از خدمات اصلی گروه است که با جدیدترین متدها و تکنولوژی های برنامه نویسی صورت می پذیرد . مهمترین ویژگی قالب‌های جدید پارس وردپرس استاندارد سازی و بهینه سازی قالب برای جستجو در وب می باشد که در نتیجه آن موتورهای جستجو قادر خواهند بود محتوا و کلمات کلیدی را راحت تر از گذشته پیدا کنند و این امر صد در صد باعث پیشرفت سایت شما در سایتهایی مانند گوگل خواهد شد.این تیم مفتخر است که تکنولوژی جدید سئو (seo) را به کاربران خود در جهت ارتقاء ، با بهترین حالت ممکن برای بهینه سازی وب سایت بر پایه وردپرس هدیه کند.

  • E-Mail : parswp @ yahoo.com
  • Tel : 0911 - 704 - 0969 | 0935 - 822 - 6018
  •    تبلیغ اسلایدشو 240*848 - هزینه ماهانه 50,000 تومان (نمایش در صفحه نخست)
  •    تبلیغ بنری 240*120 - هزینه ماهانه 30,000 تومان (نمایش در تمام صفحات)
  •    تبلیغ بنری 60*468 - هزینه ماهانه 40,000 تومان (نمایش در تمام صفحات)
  •    تبلیغ بنری 60*468 - هزینه ماهانه 30,000 تومان (نمایش در تمام پیش نمایش ها)
  •    تبلیغ متنی - هزینه ماهانه 15,000 تومان (نمایش در تمام صفحات)
  • کد امنیتی : 3 + 5

    آموزش قرار دادن ویدیو در پس زمینه سایت

  • دسته بندی ها : آموزش
  • ۲۰ بهمن ۱۳۹۴
  • 896 بازدید
  • put-the-video-in-the-background-parswp

    قرار دادن ویدیو در پس زمینه سایت

    امروز می خواهیم در رابطه با قرار دادن ویدیو به عنوان بک گراند سایت آموزشی را برای شما عزیزان قرار دهیم. احتمالا طی چند وقت اخیر محبوبیت قرار گیری ویدیو به عنوان پس زمینه (background) در سایت های مختلف، نظر شما را هم جلب کرده باشد. بنابراین اگر مایلید با نحوه قرار دادن یک ویدیو فول اسکرین به عنوان پس زمینه سایتتان آشنا شوید، آموزش امروز پارس وی پی مخصوص شماست.

    حتما بخوانید : تهیه نسخه پشتیبان در دایرکت ادمین

    خوب اگر آماده باشید شروع می کنیم …
    برای پیاده سازی آنچه در ادامه خواهیم آموخت، تقریبا به هیچ ابزار خاصی نیاز نیست. تنها چیزی که لازم داریم یک ویدیو با فرمت و حجم مناسب است. ما به این منظور از ویدیو های معروف Big Buck Bunny استفاده می کنیم. با کلیک بر روی اینجا، شما هم می توانید به این ویدیو ها دسترسی داشته باشید.

    • این آموزش تنها از طریق HTML5 و CSS پیاده سازی می شود.
    • ویدئو مناسبی را پیدا کنید و آن را در مسیر هاست خود آپلود نمائید.

    توجه !!! هر بار بارگذاری یک ویدیو بر اساس حجم ویدیو، مقداری از ترافیک مجاز سایت شما کم خواهد کرد بنابراین شاید مایل باشید ویدیو را در محلی به غیر از هاست سایت خود میزبانی کنید؟!

    گذاشتن ویدیو به عنوان پس زمینه در سایت
    کاری که می خواهیم انجام دهیم این است که ویدیوی مورد نظرمان را به صورت فول اسکرین در پس زمینه ی سایت به نمایش بگذاریم. برای این کار از تگ ویدیو HTML5 استفاده خواهیم کرد :

    <div class="fullscreen-bg">
        <video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video">
            <source src="video/big_buck_bunny.webm" type="video/webm">
            <source src="video/big_buck_bunny.mp4" type="video/mp4">
            <source src="video/big_buck_bunny.ogv" type="video/ogg">
        </video>
    </div>

    در کد بالا ویدیوی مورد نظرمان را با سه فرمت webm, mp4 و ogv فراخوانی کرده ایم. استفاده از فرمت های مختلف جهت سازگاری با مرورگر های مختلف انجام شده. همانطور که در خط دوم کد مشاهده می کنید، ویدیو قرار است به صورت لوپ، به طور اتوماتیک و بدون صدا اجرا شود.
    یکی از مواردی که در کد بالا درج شده و بهتر است راجع به آن صحبت کنیم، تصویر قرار گرفته به عنوان پوستر (poster) در خط دوم کد است. پوستر تصویری است که پیش از بارگذاری و شروع اجرای ویدیو برای کاربر به نمایش در خواهد آمد. بنابراین شاید بهتر باشد از این فرصت استفاده کنید و تصویری مناسب را به عنوان پوستر قرار دهید تا در صورتی که به هر دلیل (مثلا مشکل در اینترنت) ویدیو در مرورگر کاربری شروع به اجرا نکرد، تصویری که کاربر مشاهده میکند، مناسب و درخور محل استفاده ی ویدیو باشد و در تجربه ی کاربر از سایت شما تغییر محسوسی حاصل نشود. اگر خودتان برای poster تصویری تعیین نکنید، فریم اول ویدیو به عنوان پوستر به نمایش در خواهد آمد.

    تا اینجا ویدیوی مورد نظر را در سایت قرار داده ایم اما در این حالت این ویدیو نه فول اسکرین است و نه حالت پس زمینه دارد. برای اجرای حالت مورد نظر و تبدیل ویدیو به پس زمینه ی سایت کافی است از کد CSS زیر استفاده کنید :

    .fullscreen-bg {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
        z-index: -100;
    }
    
    .fullscreen-bg__video {
        position: absolute;
        top: 50%;
        left: 50%;
        width: auto;
        height: auto;
        min-width: 100%;
        min-height: 100%;
        -webkit-transform: translate(-50%, -50%);
           -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
    	    transform: translate(-50%, -50%);
    }
    
    @media (max-width: 767px) {
        .fullscreen-bg {
            background: url('img/videoframe.jpg') center center / cover no-repeat;
        }
    
        .fullscreen-bg__video {
            display: none;
        }
    }

    در تعریف استایل های بالا تقریبا هیچ نکته ی خاصی وجود ندارد بجز اینکه باید در نظر داشته باشید استایل های فوق با اینترنت اکسپلورر ۸ سازگار نیستند که البته به این جهت که اینترنت اکسپلورر ۸ از HTML5 هم پشتیبانی نمیکند. از طرف دیگر اگر به خطوط انتهایی استایل فوق توجه کنید خواهید دید که برای دیوایس های دارای عرض کمتر از ۷۶۸ پیکسل، ویدیو را مخفی کرده ایم و بجای آن تنها یک تصویر به نمایش میگذاریم. دلیل این مسئله این است که هنوز در بسیاری از موبایل ها، ویدئو ها به صورت اتوماتیک پخش نمیشوند و بجای پخش اتوماتیک، یک دکمه جهت پلی کردن ویدیو توسط خود کاربر به نمایش در می آید که این مسئله در نحوه ی نمایش سایت تاثیر منفی خواهد داشت. بنابراین ویدیو را مخفی می کنیم و بجای آن تنها یک تصویر به نمایش میگذاریم.

    نکته : مخفی کردن ویدیو، تاثیری در بارگذاری یا عدم بارگذاری آن ندارد و به هر حال ویدیو توسط دیوایس مورد بحث دانلود خواهد شد.

    شما یک ویدیوی فول اسکرین به عنوان پس زمینه در اختیار دارید. توجه داشته باشید که به این علت که z-index این ویدیو را معادل -۱۰۰ تعیین کرده ایم، هر عنصر دیگری که در سایت قرار بدهید، روی این ویدیو قرار خواهد گرفت. بنابراین مشکلی در اجرای هیچ یک از عناصر دیگر سایت بوجود نخواهد آمد.

    حتما بخوانید : هدایت کاربران به صفحه ای دلخواه

    نتیجه گیری :
    افرادی که علاقه دارند در پس زمینه سایت خود بجای عکس یا رنگ از ویدئو استفاده نمایند می توانند آموزش بالا را با دقت دنبال کنید.  این نکته را درنظر داشته باشید که در بارگذاری ویدیو همیشه به سرعت اینترنت کاربر و حجم ویدیو فکر کنید و از بارگذاری فایل های حجیم به عنوان پس زمینه خودداری کنید تا کاربرانتان تجربه ای مناسب از به کار گیری سایت شما داشته باشد.

    منبع : پارس وردپرس

    , , , , , , , , , , , , , , , ,
    آموزش
    آموزش طراحی
    آموزش قرار دادن ویدیو
    آموزش قرار دادن ویدیو در پس زمینه سایت
    آموزش وردپرس
    پوسته وردپرس
    طراحی سایت حرفه ای
    طراحی سایت وردپرسی
    طراحی وب سایت
    طراحی وب‌سایت
    قالب تفریحی
    قالب خبری
    قالب رایگان وردپرس
    قالب وردپرس
    قرار دادن ویدیو
    قرار دادن ویدیو در پس زمینه سایت
    وردپرس

    راستی! ما یک راه نزدیک برای درکنار شما بودن پیدا کردیم :)

    کانال تلگرام پارس وردپرس

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

    شماره کارت : 2154-6486-3378-6104

    بانک ملت

    بنام : سینا شاهین

    شماره همراه 09358226018 ، 24 ساعته پشتیبان شما می باشد و پس از واریز برایتان ارسال خواهد شد .

    مطالب تصادفی
    موقعیت مکانی کاربران بدون افزونه
  • بازدید : 747
  • تاریخ : ۱۳ - ۱۱ - ۱۳۹۴
  • مهم ترین تفاوت های SEO و SEM در چیست؟
  • بازدید : 821
  • تاریخ : ۲۶ - ۰۹ - ۱۳۹۴
  • به‌روزرسانی url های وردپرس با Velvet Blues Update URLs
  • بازدید : 396
  • تاریخ : ۲۰ - ۰۱ - ۱۳۹۶
  • آمار حرفه ای وردپرس با WP Statistics
  • بازدید : 921
  • تاریخ : ۲۰ - ۱۱ - ۱۳۹۴
  • تغییر آدرس ورود وردپرس با پلاگین
  • بازدید : 3409
  • تاریخ : ۱۰ - ۰۹ - ۱۳۹۳
  • ساخت فرم تماس با ما در وردپرس با Wpforms Lite
  • بازدید : 663
  • تاریخ : ۲۸ - ۰۴ - ۱۳۹۶
  • ساخت صفحه ما به زودی می آییم با YITH Pre-Launch
  • بازدید : 1046
  • تاریخ : ۱۶ - ۰۱ - ۱۳۹۵
  • غیر فعال کردن هشدار دیدگاه جدید در وردپرس
  • بازدید : 559
  • تاریخ : ۱۱ - ۰۹ - ۱۳۹۴
  • بررسی لینک های غیر واقعی از نگاه گوگل
  • بازدید : 284
  • تاریخ : ۱۱ - ۱۲ - ۱۳۹۵
  • نظرات کاربران


    کد امنیتی : 5 + 2
    طراحی سایت

    طراحی وبسایت تخصص ماست ، شما می توانید برای مشاوره و دریافت قیمت از لینک زیر یا شماره های سایت اقدام نمائید.

    هم اکنون سفارش دهید
    newslatter

    خبرنامه :

    با عضویت در خبرنامه هــــــیچ یک از مطالب سایـت را از دسـت نخواهید داد و همیـشه بروز خواهـید بود

    خبرنامه اینترنتی
    load
    ربات پارس وردپرس

    ربات هوشمند پارس وردپرس

    هم اکنون وارد شوید
    همراه ما باشید ...
  • جدید ترین ها

  • افزونه ها

  • اخبار وردپرسی

  • لطفا شکیبا باشید ...
  • تبلیغات

  • کلیک کنید

    کدنویسی CSS3

    کدنویسی بوسیله استایل دهی برای زیباسازی و سرعت بارگذاری بهتر قالب ها .

    واکنشگرا

    قابلیت ریسپانسیو بودن برای نمایش بهتر در موبایل ها و تبلت ها .

    کدنویسی HTML5

    کدنویسی قالب برپایه جدیدترین متدهای روز انجام می پذیرد .

    پشتیبانی حرفه ای

    تیم پارس وردپرس از ساعت 9 صبح الی 20 پاسخگوی شما خواهد بود .

    پنل مدیریت آسان

    شما می توانید با پنل مدیریت قالب ، مدیریت آسان را تجربه کنید .

    طراحی سایت
    طراحی سایتسئوسرویس و تعمیر کولر گازیفروش ویلا و اجاره ویلااجاره ویلافروش ویلا
    telegram instagram