Jump to content


Photo
- - - - -

Linking Video to a Box Image - I.E. Having it play inside the same box.


  • Please log in to reply
5 replies to this topic

#1 christycollins

christycollins

    Super Member

  • Members
  • 179 posts
  • LocationTexas
  • Country: Country Flag

Posted 23 July 2012 - 07:15 PM

Please refer to this page http://www.garancedo...ategory/videos/ I want to have the video play inside the same box with a still image as the first thing you see. For example, when I click on the still image the YouTube video comes up in the same box. So, I want it to play inside that same box and not open a new window or a new page.
  • psqtcherpdo, cqainteyroen3 and cqainteyrohan like this

#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 23 July 2012 - 07:47 PM

If you upload an image to the box, then make the DIV surrounding the image include the video link, it would work. That's how it's done on that site:
 <div id="video_embed_29800" class="video_embed">
	<iframe id="big_video_fullplayer29800" width="560" height="330" frameborder="0" data-newsrc="http://www.youtube.com/embed/6RNIjd_ShKc?wmode=transparent&autoplay=1" src="http://www.youtube.com/embed/6RNIjd_ShKc?wmode=transparent&autoplay=0" type="text/html">
	<html lang="en" dir="ltr">
	</iframe>
	<img id="big_video_fullimage29800" alt="" src="http://www.garancedore.fr/wp-content/uploads/2012/06/tkh1-copy.jpg">
	</div>

Do you see how they achieved it? Use Firebug to find the CSS for video_embed class on that site.

#3 christycollins

christycollins

    Super Member

  • Members
  • 179 posts
  • LocationTexas
  • Country: Country Flag

Posted 23 July 2012 - 07:56 PM

Is that the easiest way to do it? So I must do it by adding code? I guess this is just over my head here. This code is put in the HTML part of the page, or is it put somewhere else? I can't figure out where the code goes. I need to learn how to use Firebug. If I plug in the code that you gave me and try to work backwards, all that does is put the video and then the picture. I does't marry the two together. So this doesn't mean anything to me either... "then make the DIV surrounding the image include the video link" Ok, so here is another example of the box with the video. I guess you have got the picture by now though. http://www.lamartina...n/#!prettyPhoto

#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 23 July 2012 - 09:03 PM

Christy, there are plugins, many excellent ones, that can replace our boxes and sliders with ones that use static images as a link to videos. It's strongly advised that you use (and learn) Firebug for Firefox or Chrome's Inspection Tools (pretty much the same things). A pro might be needed if you're seeking to create something custom.

#5 christycollins

christycollins

    Super Member

  • Members
  • 179 posts
  • LocationTexas
  • Country: Country Flag

Posted 23 July 2012 - 10:15 PM

can you please suggest one of the plugins?

#6 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 24 July 2012 - 02:20 PM

Page @rangelone for a list of these plugins ;)