वर्डप्रेस: ​​वीडियो फेसबॉक्स पॉपअप कैसे बनाएं

Vimeo और Youtube वीडियो अब उच्च परिभाषा वीडियो प्रदान करते हैं जो एक वेब साइट या ब्लॉग पर काफी अचल संपत्ति ले सकते हैं। इसके लिए अनुकूलन का एक तरीका फेसबॉक्स नामक एक विधि का उपयोग करना है। एक फेसबॉक्स एक अलग पॉपअप विंडो के बिना आपके पृष्ठ के भीतर एक विंडो प्रदर्शित करने का एक अच्छा साधन है।

जीवन रेखा-वीडियो-button.png

लाइफलाइन डाटा सेंटर एक अन्य कूल डिज़ाइन द्वारा निर्मित एक वीडियो था जिसे वे अपने होम पेज पर प्रस्तुत करना चाहते थे - विषय को स्थानांतरित या फिर से डिज़ाइन किए बिना। तो - हमने उस पर एक बड़े प्ले बटन के साथ एक अच्छी छोटी छवि बनाई, और कोड को शामिल किया जो वीडियो को प्रदर्शित करने के लिए एक स्टाइलिश विंडो उत्पन्न करता है।

जीवन रेखा-वीडियो-facebox.png

का उपयोग करके कार्यान्वयन सरल था वर्डप्रेस फेसबॉक्स गैलरी प्लगइन से ट्रिमेज। मैंने ए बाहरी पृष्ठ (video.html) उस साइट की जड़ में, जिसमें वीडियो है (ऑटोप्ले = 1 के साथ ताकि वह खुलने पर ऑटो चलाता है), और फिर आवश्यक स्निपेट के साथ एक पाठ विजेट जोड़ा।

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

पिछली कक्षा का rel = facebox पदनाम वह है जो लिंक पर क्लिक करने के बाद कोड को आरंभ करता है। यह वीडियो फेसबॉक्स को पॉप अप करता है जो तुरंत खेलना शुरू कर देता है। यह एक सरल कार्यान्वयन है और एक पृष्ठ में एक या अधिक वीडियो एम्बेड करने का एक आसान समाधान है। हम इस पद्धति का उपयोग बहुत जल्द किसी अन्य साइट पर करेंगे!

नोट: क्लाइंट के भीतर वीडियो के साथ दृश्यों की संख्या को कैप्चर करना महत्वपूर्ण है विश्लेषिकी (Google Analytics), इसलिए हमने एंकर टैग पर एक ऑनक्लिक ईवेंट भी जोड़ा। अब, जब लोग वीडियो पर क्लिक करते हैं, तो हमें एक 'वर्चुअल' पेजव्यू मिलता है। मैंने उपरोक्त कोड जोड़ा है।

3 टिप्पणियाँ

  1. 1

    एक ट्यूटोरियल लिखने के लिए धन्यवाद। उम्मीद है कि यह फेसबॉक्स पॉप-अप में इनलाइन सामग्री को लागू करने के लिए कुछ चीजों को स्पष्ट करेगा। 🙂

  2. 2

    क्या आपको खिड़की बंद करने पर IE पर एहसास होता है, वीडियो पृष्ठभूमि में खेलना जारी रखेगा? (समस्या में अपने आप को चलाने के लिए और एक ठीक खोजने की कोशिश कर रहा हूँ!)

तुम्हें क्या लगता है?

यह साइट स्पैम को कम करने के लिए अकिस्मेट का उपयोग करती है। जानें कि आपका डेटा कैसे संसाधित किया जाता है.