Solved

How do I add a video to a lightbox in Wordpress?

Posted on 2012-04-01
4
374 Views
Last Modified: 2012-06-21
I need to be able to allow the user to select image and display a video in a light box, just like:

•      themeforest.net/item/folioflip/full_screen_preview/101133
•      When you choose “Avatar” and select the arrow a video displays in the lightbox.

I have added a:
•      Feature Image
•      Video to the post and
•      A custom “movie” field.

Any help is appreciated.
0
Comment
Question by:lilmo
  • 2
4 Comments
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 37794407
That page generates a virus warning for a Trojan so I would be very careful about visiting it.

Are you actually using that theme or just inquiring about the technique?
0
 

Author Comment

by:lilmo
ID: 37796556
Yes. I am using that theme... Thanks for the warning.
0
 
LVL 12

Expert Comment

by:Tony van Schaik
ID: 37797197
Most of time i use Prettyphoto or Shadowbox.js for displaying videos and images:

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
http://www.shadowbox-js.com/

Only thing you need to add to the URL is, for example with Prettyphoto:

<a href="http://www.youtube.com/watch?v=qqXi8WmQ_WM" rel="prettyPhoto" title=""><img src="images/thumbnails/flash-logo.jpg" alt="YouTube" width="60" /></a>

Open in new window


You can also add multiple videos and images in one lightbox.

But i stopped using lightboxes for video because it can cause issues on iPad/iPhones or you can try to load in as an iframe that is also possible with Prettyphoto, only thing you for that is the HTML5 version embed code of youtube:

<iframe width="560" height="315" src="http://www.youtube.com/embed/EgmP66wBRig" frameborder="0" allowfullscreen></iframe>

Open in new window


Good luck.
0
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 500 total points
ID: 37797370
If the question is theme-specific, it's not possible to help you unless the theme is freely available.  Putting aside the fact that the demo is attempting to load a virus, we have zero visibility on how the theme is coded and it's probably not legal for you to provide copies of it.  You are most likely going to need support from the developer.
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…

832 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question