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

جولای 17, 2017
ارسال توسط مجتبی صادقیان

شاید به تازگی به بسیاری از وب سایت ها برخورده باشید که در صفحاتشون از ویدئو ها بهره میبرند ولی کمتر سایتی رو مشاهده خواهید کرد که در پس زمینه سایت خود از ویدئو ها به صورت فول اسکرین استفاده کرده باشند.این ایده که به تازگی بین طراحان و مدیران سایت ها باب شده و مورد توجه بسیاری از کاربران اینترنت قرار گرفته زیبایی بی نظیری رو به وب سایتتون اضافه خواهد کرد.پس اگه شما هم میخواید بدونید که چطوری میشه بک گراند سایت خود رو به صورت ویدئو درآورد پس با این قسمت از آموزش وردپرس وبمستر98 با ما همراه باشید.

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

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

ما در این آموزش از کدهای html5 css استفاده خواهیم کرد که اگه درباره این زبان ها آشنایی داشته باشید که چه بهتر میتونید تنظیمات شخصی خودتون رو هم روشون پیاده سازی کنید ولی اگر اطلاعاتی هم در این مورد ندارید اصلا مسئله ای نیست ما در این آموزش همه چیز رو به صورت کامل یاد خواهیم داد پس با ما باشید.

برای اینکار سعی کنید که از ویدئو هایی با حجم نسبتا پایین استفاده کنید مطمئنا میدونید چرا ولی دیگه پایین آوردن حجم طوری نباشه که به کیفیت ویدئو و سایتتون آسیب بزنه.

ما در این آموزش به عنوان مثال از ویدئو های big buck bunny که معروفیت زیادی داره استفاده خواهیم کرد که با یک سرچ تو گوگل میتونید پیداشون کنید.

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

فقط یک نکته!

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

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

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

خب آموشمون رو شروع میکنیم برای اینکار همانطور که در بالا گفتم ما از کدهای css3 / html5 برای قراردادن ویدئو در پس زمینه سایت استفاده خواهیم کرد.

یه نکته رو بگم برای دوستانی که آشنایی با این دو ندارند.

در طراحی برای اسکلت دهی به شی ها از کدهای html5 و برای استایل دهی و زیبا کردنشون هم از کدهای css3 استفاده خواهیم کرد.

اگر هم به کد زیر دقت کنید متوجه خواهید شد که برای قرار دادن ویدئو در سایت از تگ <video> استفاده خواهیم کرد.

<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>

خب اگر در کد بالا دقت کنید میبینید که ما از سه فرمت ogv , .webm , .mp4 استفاده کرده ایم.

این کار برای سازگار ساختن کد با مرورگرهای مختلف به کار میره.

همچنین در داخل تگ <video> مشخص کردیم که ویدئو به صورت لوپ یعنی تکرار بی پایان و به صورت اتوماتیک و بدون داشتن صدا به اجرا در آید.

خب یه توضیح دیگه هم راجب کد بالا بهتون بدم راجب این خط

poster="img/videoframe.jpg"

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

متاسفانه به علت بالا بودن حجم ویدئو ها و کم بودن سرعت اینترنت ممکنه که مشکلی برای ویدئو پیش بیاد یا خیلی دیر تر پخش بشه یا اصلا پخش نشه برای همین شما میتونید از یک پوستر زیبا و مرتبط استفاده کنید که چنانچه مشکلی هم پیش اومد سایتتون زیباییش رو از دست نده و بهم نریزه و باعث نارضایتی کاربران سایتتون هم نشه.

در صورتی که شما پوستری رو انتخاب نکنید فریم اول ویدئو به عنوان پوستر انتخاب خواهد شد ولی بهتون پیشنهاد میکنیم که حتما پوستر رو خودتون انتخاب کنین.

خب تا اینجای کار ما ویدئو رو ساختیم به کمک کد های html حالا نوبت میرسه به فول اسکرین کردن و همچنین بک گراند کردن ویدئو که این کار رو هم باید با کدهای 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;
    }
}

خب دیگه کار تمام است.

راجب کد های بالا مطلبی نیست که بگم فقط این کدها در اینترنت اکسپلورر 8 ارور میده چون مرورگر از html5 پشتیبانی نمیکنه.

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

شاید بخواید این کد رو حذفش کنید ولی دست نگه دارید.

این کد برای این نوشته شده که در موبایل ها هنوز ویدئو ها به صورت خودکار اجرا نمیشن و برای اجرای ویدئو ها یک دکمه برای پلی کردن آنها قرار میگیره که این کار به طراحی سایت لطمه میزنه به همین خاطر ما ترجیه میدیم که ویدئو حذف بشه و به جاش یک تصویر به نمایش گذارده بشه تا اینکه طراحی سایتتون به هم بخوره!

همچنین نگران تاثیر نامطلوب این کد بر دیگر دیوایس ها نباشید زیرا ویدئو به درستی دانلود خواهد شد فقط در موبایل ها مخفی خواهد ماند.

در کد بالا ما با مشخص کردن z-index این ویدئو که مقدارش برابر -100 گذاشته شده در زیر تمامی عناصر قرار خواهد گرفت پس نگران به هم خوردن طراحی سایتتون نباشید. فقط عناصری میتونن در زیر این ویدئو قرار بگیرند که z-index اونها مقدارش از -100 کمتر باشه که خب اگه شما با کد نویسی مشخص نکنید به صورت پیش فرض همه ی عناصر z-index برابر صفر دارند.

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

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

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

بد نیست پست زیر را نیز مشاهده بکنید