Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2012-04-01
4
Medium Priority
?
379 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 1500 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
Suggested Courses

618 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