قرار دادن پس زمینه ویدئویی برای وردپرس در ۳ مرحله

قرار دادن پس زمینه ویدئویی برای وردپرس: وب سایتی را تصور کنید که عکس یک “قهرمان” را به عنوان تصویر سربرگ انتخاب کرده است. عالی به نطر می رسد! تصاویر بزرگ میتوانند سایت شما را عالی جلوه دهد اما نمی تواند توجه بازدید کننده شما را برای مدت طولانی جلب کند! اگر واقعا می خواهید بازدید کننده را برای مدتی طولانی تر نگه دارید و توجه ش بیشتر حلب شود چاره کار استفاده از ویدئو برای پس رمینه وردپرس می باشد. با آموزش نحوه قرار دادن پس زمینه ویدئویی برای وردپرس دز ۴ مرحله با وبتازان همراه باشید.

یکی از محبوب ترین موضوعات داغ در زمینه طراحی وب پخش ویدئو در پس زمینه است (video in background). مرورگر ها می توانند در HTML5 با استفاده از تگ <video> یا فرمت H.264 پخش کنند. می توانند ویدئو را به صورت مستقل و اتوماتیک پخش کنند و شما می توانید آن را به سادگی المنت های دیگر کنترل کنید. پس زمنیه ویدئویی میتواند سایت شما را بیسار جالب تر کنند و از حالت یکنواخت خارج کنند.

قرار دادن پس زمینه ویدئویی برای وردپرس در ۳ مرحله

مرحله اول: انتخاب فایل ویدویی برای قرار دادن پس زمینه ویدئویی

 

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

مرحله دوم: تبدیل ویدیو به فرمت و اندازه مناسبقرار دادن پس زمینه ویدئویی برای وردپرس

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

مرحله ۳: انتخاب پخش کننده مناسب برای قرار دادن پس زمینه ویدئویی برای وردپرس

برای قرار دادن پس زمینه ویدئویی برای وردپرس ویدئو پلیر های متنوعی وجود دارد شما میتوانید ویدئو ر ابه صورت دستی  encode کنید و یا از افزونه وردپرس برای اینکار استفاده کنید.. شما دوست دارید ویدئو به صورت پاسخگو (Responsive) باشد و به جذابیت ورپرس اضافه شود پس باید قرار دادن پس زمینه ویدئویی برای وردپرس را به دقت انجام دهید.

 

استفاده از HTML5, CSS  و  JavaScript

مزیت استفاده از HMTL5, CSS قرار دادن پس زمینه ویدئویی برای وردپرس سبک وزن بودن، پاسخگو بودن (Responsive) ، امکان تغییر style مانند دیگر المنت ها و تست مرورگز و نشان دادن تصویر جایگزین برای مرورگرهایی مه نمی توانند ویدئو را نمایش دهند مانند IE & Opera.

کد نویسی 

اول از همه باید جایی برای قرار دادن کد باز کنیم:

در این کد دو تصویر استفاده میشود. یکی برای Placeholder که معمولا اولین فریم ویدئو است و دوم تصویر جایگزین.

کد اسکریپت

این کد برای تست مرورگر است:

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

CSS

می توانید ظاهر پخش کننده را با استفده از CSS بهبود ببخشید. در اینجا برای نعیین اندازه Container و تغییر مقیاس تگ های <img>  و <video>  استفاده شده است.

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

افزونه وردپرس

وردپرس برای سادگی کارهای کاربران تقریبا باری هرکاری افزونه دارد و این یکی از ویژگی های خیلی خوب وردپرسه. برای قرار دادن پس زمینه ویدئویی برای وردپرس میتونیم از افزونه mb.YTPlayer for background videos استفاده کنیم. این افزونه میتونه تمام ویدئوهای یوتیوب را برای پس زمینه سایت شما قرار بدهد

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

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

پایان آموزش

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

نظرات