Solved

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

Posted on 2012-04-01
4
375 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Output to HTML in powershell 3 27
if (is_singular not working 5 19
Share location on a web browser 4 12
Why is initMap returning "not a function" error. 3 32
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

828 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