WordPress: Πώς να δημιουργήσετε ένα αναδυόμενο παράθυρο Facebox βίντεο

Τα βίντεο Vimeo και Youtube προσφέρουν τώρα βίντεο υψηλότερης ευκρίνειας που μπορούν να καταλάβουν αρκετά ακίνητα σε έναν ιστότοπο ή ιστολόγιο. Ένας τρόπος βελτιστοποίησης για αυτό είναι να χρησιμοποιήσετε μια μέθοδο που ονομάζεται Facebox. Το facebox είναι ένα ωραίο μέσο εμφάνισης ενός παραθύρου στη σελίδα σας χωρίς ξεχωριστό αναδυόμενο παράθυρο.

lifeline-video-button.png

Κέντρα δεδομένων Lifeline είχε ένα βίντεο από το Another Cool Design που ήθελαν να παρουσιάσουν στην αρχική τους σελίδα - χωρίς να χρειάζεται να μετεγκαταστήσουν ή να επανασχεδιάσουν το θέμα. Έτσι - φτιάξαμε μια ωραία μικρή εικόνα με ένα μεγάλο κουμπί αναπαραγωγής και ενσωματώσαμε κώδικα που δημιουργεί ένα κομψό παράθυρο για την προβολή του βίντεο μέσα.

lifeline-video-facebox.png

Η εφαρμογή ήταν απλή χρησιμοποιώντας το Πρόσθετο WordPress Facebox Gallery από Αλήθεια. Δημιούργησα ένα εξωτερική σελίδα (video.html) στη ρίζα του ιστότοπου που έχει το βίντεο (με αυτόματη αναπαραγωγή = 1, ώστε να αναπαράγεται αυτόματα όταν ανοίγει) και, στη συνέχεια, πρόσθεσε ένα widget κειμένου με το απαραίτητο απόσπασμα.

<a href="video.html" rel = "κουτί προσώπου" onclick = "javascript: pageTracker._trackPageview ('/ special / mypage');"> 

Το rel = κουτί προσώπου ο ορισμός είναι αυτό που ξεκινά τον κώδικα μόλις πατηθεί ο σύνδεσμος. Εμφανίζεται το πλαίσιο οθόνης του βίντεο που αρχίζει να παίζει αμέσως. Είναι μια απλή εφαρμογή και μια εύκολη λύση για την ενσωμάτωση ενός ή περισσότερων βίντεο σε μια σελίδα. Θα χρησιμοποιήσουμε αυτήν τη μέθοδο σε έναν άλλο ιστότοπο πολύ σύντομα!

ΣΗΜΕΙΩΣΗ: Είναι σημαντικό να καταγράψετε τον αριθμό προβολών με το βίντεο εντός του πελάτη analytics (Google Analytics), επομένως προσθέσαμε επίσης ένα συμβάν onclick στην ετικέτα αγκύρωσης. Τώρα, όταν οι χρήστες κάνουν κλικ στο βίντεο, λαμβάνουμε μια «εικονική» προβολή σελίδας. Έχω προσθέσει τον παραπάνω κωδικό.

3 Σχόλια

  1. 1

    Ευχαριστούμε που γράψατε ένα σεμινάριο. Ας ελπίσουμε ότι θα καθαρίσει ορισμένα πράγματα για την εφαρμογή ενσωματωμένου περιεχομένου σε ένα αναδυόμενο παράθυρο. 🙂

  2. 2

Ποια είναι η γνώμη σας;

Αυτός ο ιστότοπος χρησιμοποιεί το Akismet για να μειώσει το spam. Μάθετε πώς επεξεργάζονται τα δεδομένα των σχολίων σας.