WordPress: Hoe maak u 'n pop-upvenster vir 'n videofacebox | Martech Zone
Friday, July 2, 2010 Sondag Oktober 4, 2015 Douglas Karr
Vimeo- en Youtube-video's bied nou video's met hoër definisie aan wat op 'n webwerf of blog heelwat vaste eiendom kan beslaan. Een manier om hiervoor te optimaliseer, is om 'n metode genaamd 'Facebox' te gebruik. 'N Gesigvak is 'n goeie manier om 'n venster binne u bladsy te vertoon sonder 'n aparte pop-upvenster.
Lifeline-datasentrums het 'n video laat vervaardig deur Another Cool Design wat hulle op hul tuisblad wou aanbied - sonder om die tema te verplaas of te herontwerp. Dus - ons het 'n mooi klein prentjie gemaak met 'n groot speelknoppie daarop en kode opgeneem wat 'n stylvolle venster genereer om die video binne te vertoon.
Die implementering was eenvoudig met behulp van die WordPress Facebox Gallery-inprop van Truimage. Ek het 'n eksterne bladsy (video.html) in die wortel van die webwerf met die video (met outospeel = 1 sodat dit outomaties kan speel wanneer dit oopgaan), en voeg dan 'n teks-widget met die nodige brokkie by.
Die rel = gesigskas die benaming is wat die kode inisieer sodra daar op die skakel geklik word. Dit verskyn op die video-gesigskas wat onmiddellik begin speel. Dit is 'n eenvoudige implementering en 'n maklike oplossing om een ​​of meer video's op 'n bladsy in te bed. Ons sal binnekort hierdie metode op 'n ander webwerf gebruik!
OPMERKING: Dit is belangrik om die aantal kyke met die video binne die kliënt vas te lê analytics (Google Analytics), dus het ons ook 'n onclick-gebeurtenis op die ankerplaatjie bygevoeg. As mense nou op die video klik, kry ons 'n 'virtuele' bladsyweergawe. Ek het die kode hierbo bygevoeg.
Bemarkingsgeleiers ... fout ... Konsultante
Julie 12, 2010 by 11: 36 PM
Dankie dat jy 'n tutoriaal geskryf het. Hopelik sal dit 'n paar dinge opklaar vir die implementering van inlyn-inhoud in 'n gesigboks-opspringer. 🙂
Junie 26, 2011 by 10: 21 PM
Besef jy op IE wanneer jy die venster toemaak, sal die video voortgaan om in die agtergrond te speel? (het self die probleem ondervind en probeer 'n oplossing vind!)