Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Cameron Bourke
Cameron Bourke
10,198 Points

Video playing in the Background

Hey everyone!

For those who love a challenge, I think I definitely have one for you's!

I'm just about finished with the landing page at http://www.hoursapp.com.au, however there is one annoying bug that I cannot solve. When you start the video (from the "watch the video" button), and then click on the overlay to exit the video it still plays in the background.

I have retro fit this project, http://teamtreehouse.com/library/jquery-basics/creating-a-simple-lightbox/perform-part-1. to get it to work. I think the problem is that when the overlay is clicked it is only hiding the video, instead of stopping it.

I am not that experienced with jQuery so I'm a little lost on how to address this kind of bug. If you can work it out, you are a legend and a half.

Thanks in advance guys!

2 Answers

Chris Shaw
Chris Shaw
26,676 Points

Hi Cameron,

This happens because browsers aren't designed to ignore elements with media even if they have a video and/or audio player which means you get an unexpected result like the one on your site, there are a couple of ways to solve it.

  1. You dynamically inject the iframe into your .video-wrapper container and remove it when the overlay is hidden;
  2. or you use the Vimeo JavaScript API which is quite nice and makes dynamic control of their video player much easier

Based on my experience with this I would choose the JavaScript API as it offers much more finite control over playing, pausing, creating, deleting etc, Vimeo also offer a lot of detailed information and examples of how to use it which is a plus as well.

Nichole Frazier
Nichole Frazier
9,653 Points
Nichole Frazier
Nichole Frazier
9,653 Points

In your code where you hide your overlay, try also including the following code: var myPlayer = document.getElementById('playerid'); myPlayer.stopVideo();

Make sure you give your video an id, and replace 'playerid' with whatever you name it. I think that should work.