How to add the video header like the demo (Skin 6)

• andy

  said

  I get asked a lot about the video in the header of skin 6 on our Mingle demo site. The code couldn’t be pasted into the ThemeForest comments or FAQs so I was emailing upon request. Well, now that we have this great help site it only makes sense to share this code with everyone:

  Below is the code used for the skin 6 video header. This was entered into a “Top Graphic” (not slide show) area:

  <div style="margin: -20px; height: 445px; overflow: hidden;">
      <div onclick="jQuery('#DemoVideoHeader').append('<iframe width=990 height=587 src=http://www.youtube.com/embed/B7UmUX68KtE?rel=0&hd=1&autoplay=1&wmode=Opaque&frameborder=0></iframe>').css('display','block'); this.style.display='none'">
   
          <img src="YourVideoImageHere.jpg" style="cursor:pointer" />
   
      </div>
      <div style="display:none" id="DemoVideoHeader"></div>
  </div>

  http://pastebin.com/i0stUkVU

  The following pieces of the code need to be changed for your site.
  

  1. The video URL:

  http://www.youtube.com/embed/B7UmUX68KtE?rel=0&hd=1&autoplay=1&wmode=Opaque

  In the example code you will find the iframe with this “src”. You can copy your URL or just replace the video ID bolded above.

  2. The height of the main DIV and the video:

  The height relates directly to getting the overlay curve at the bottom to cover the player controls. The sample code has these heights. DIV container “height: 445px;” and video iframe “height=587“. Setting the height of the dive container slightly shorter than the video is what lets the curve cover the controls.

  3. The placeholder image.

  Videos on YouTube have really low resolution thumbnails that show before the video plays. To deal with this a large image is shown before the video and when clicked it is hidden and the video immediately show. It happens too fast for you to see it but that’s what happens.

  You need to update this video to one of your own. In the example we have the following fake image:

  <img src="YourVideoImageHere.jpg" style="cursor:pointer" />

  Change that to your own image on your server and you’re done.

• zerwes

  said

  Andy, please, it’s only my ignorance or where should I put the youtube link? I tried to put it in some many ways. But I didn’t get it. The image is fine. But I don’t know where exactly I should put the video. Thank you, once again.

• scott74

  said

  This was sent to me a few days ago before this form…. if this helps

  http://codepaste.net/twtnyz

• zerwes

  said

  Scott, it worked very well. Thanks a lot.

• scott74

  said

  No problem. I am trying to get the transparent play button that paraelell used on his pic to overlay on mine. If you are watching this forum or if anyone has it , can you provide link to image ( play button) or upload here. It is part of the demo image so can’t extract it

  Thanks

• zerwes

  said

  Man, I think you try to do that on photoshop, because it’s part of YourVideoImageHere.jpg.

• andy

  said

  Sorry about the problem displaying the code. The forum’s HTML filter was removing some important parts. I’m still working on improving the ability to post code. I think I’ve corrected the section above in the original post and it’s displaying the full block now.

• scott74

  said

  I have all the code and have the video working.. just looking for the play button you used to overlay on your pic….

• andy

  said

  @scott74

  That is just a graphic I made for the demo and saved as a JPG (with video image included). There is no button file. The only copy of that in existence is the one on the demo with the Muppet video.

• wibbsy

  said

  I’ve been trying to put this together as a slide show for ages and struggled until I found this.

  out of interest why can’t this be done as a single column video slideshow? Or if it can, would you just put the iframe code as a custom content?

  I’ve tried numerous options but never manage to get the video (youtube or vimeo) to maximise the available space.

• curiousg

  said

  Now how on earth do we use a Vimeo video with skin 6? You really should put all this in the instructions.

• curiousg

  said

  …and consider putting together a dummy file of content etc to make the theme easier to get up and running from scratch.

• curiousg

  said

  Don’t worry I figured it out however it would be best to revise your documentation better for future clients.

• scott74

  said

  Found theme kinda of confusing myself… Looks great but very confusing.. Not using anymore at the moment…. Not knocking design just figuring out the theme

• seanmckeon

  said

  One question, is it possible to add a video with the header slider? example, I have 5 images on my slider but I also want to add a video!