وردپرس: چگونه یک پنجره ویدیویی Facebox ایجاد کنیم

ویدیوهای Vimeo و Youtube اکنون فیلم هایی با کیفیت بالاتر را ارائه می دهند که می تواند در یک وب سایت یا وبلاگ مقدار زیادی از املاک و مستغلات را اشغال کند. یکی از راه های بهینه سازی این استفاده از روشی به نام Facebox است. Facebox یک وسیله خوب برای نمایش یک پنجره در صفحه شما بدون یک پنجره پنجره جداگانه است.

lifeline-video-button.png

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

lifeline-video-facebox.png

پیاده سازی با استفاده از ساده بود افزونه گالری وردپرس Facebox از جانب واقعیت. من ایجاد کردم صفحه خارجی (video.html) در ریشه سایتی که ویدئو را در اختیار دارد (با پخش خودکار = 1 به طوری که هنگام باز شدن به صورت خودکار پخش شود) ، و سپس یک ابزارک متنی با قطعه لازم اضافه کنید.

<a href="video.html" rel = "facebox" onclick = "javascript: pageTracker._trackPageview ('/ special / mypage')؛"> 

La rel = facebox تعیین همان چیزی است که کد را با کلیک روی پیوند آغاز می کند. این باکس فیس بوک ویدیویی ظاهر می شود که بلافاصله شروع به پخش می کند. این یک پیاده سازی ساده و یک راه حل آسان برای تعبیه یک یا چند فیلم را به یک صفحه است. خیلی زود از این روش در سایت دیگری استفاده خواهیم کرد!

توجه: مهم است که تعداد بازدیدها با ویدیو را در مشتری مشاهده کنید علم تجزیه و تحلیل (Google Analytics) ، بنابراین ما همچنین یک رویداد onclick را روی برچسب anchor اضافه کردیم. اکنون ، هنگامی که افراد بر روی ویدیو کلیک می کنند ، ما یک صفحه مشاهده "مجازی" دریافت می کنیم. من کد بالا را اضافه کردم

3 نظرات

  1. 1

    با تشکر از نوشتن یک آموزش امیدواریم مواردی را برای پیاده سازی محتوای درون خطی در پاپ آپ فیس باکس روشن کند. 🙂

  2. 2

    آیا متوجه شدید که با بستن پنجره در اینترنت اکسپلورر، ویدیو همچنان در پس‌زمینه پخش می‌شود؟ (خودم با مشکل مواجه شدم و سعی می کنم راه حلی پیدا کنم!)

شما چه فکر میکنید؟

این سایت از Akismet برای کاهش هرزنامه استفاده می کند. بدانید که چگونه نظر شما پردازش می شود.