When I click play on my video player it plays both videos on the page

Question

I'm trying to custom make a video player in HTML5 and when I push play on the top video it plays both videos on the page.

Here is my jsfiddle: http://jsfiddle.net/BannerBomb/U4MZ3/27/

Here's my HTML:

<!--Video 1-->
<section id="wrapper">
    <div class="videoContainer">
        <video id="myVideo" controls preload="auto" poster="http://s.cdpn.io/6035/vp_poster.jpg" width="380" >
            <source src="http://html-testing.github.io/2/videos/mikethefrog.mp4" type="video/mp4" />
            <p>Your browser does not support the video tag.</p>
        </video>
        <div class="caption">Video1</div>
        <div class="control">
            <div class="btmControl">
                <div class="btnPlay btn" title="Play/Pause video"><span class="icon-play"></span></div>
                <div class="progress-bar">
                    <div class="progress">
                        <span class="bufferBar"></span>
                        <span class="timeBar"></span>
                    </div>
                </div>
                <!--<div class="volume" title="Set volume">
                <span class="volumeBar"></span>
                </div>-->
                <div class="sound sound2 btn" title="Mute/Unmute sound"><span class="icon-sound"></span></div>
                <div class="btnFS btn" title="Switch to full screen"><span class="icon-fullscreen"></span></div>
            </div>
        </div>
    </div>
</section>

<!--Video 2-->
<section id="wrapper">
    <div class="videoContainer">

        <video id="myVideo" controls preload="auto" poster="http://s.cdpn.io/6035/vp_poster.jpg" width="380" >
            <source src="http://html-testing.github.io/2/videos/mikethefrog.mp4" type="video/mp4" />
            <p>Your browser does not support the video tag.</p>
        </video>
        <div class="caption">Video2</div>
        <div class="control">
            <div class="btmControl">
                <div class="btnPlay btn" title="Play/Pause video"><span class="icon-play"></span></div>
                <div class="progress-bar">
                    <div class="progress">
                        <span class="bufferBar"></span>
                        <span class="timeBar"></span>
                    </div>
                </div>
                <!--<div class="volume" title="Set volume">
                <span class="volumeBar"></span>
                </div>-->
                <div class="sound sound2 btn" title="Mute/Unmute sound"><span class="icon-sound"></span></div>
                <div class="btnFS btn" title="Switch to full screen"><span class="icon-fullscreen"></span></div>
            </div>

        </div>
    </div>
</section>

If you take a look in the jsfiddle link I provided you can see the CSS and JavaScript I wrote.

Answer 1

There is so much code to change that it would take a very long time so I will explain what is happening.

On almost all of your events you are effecting the classes and animations of element(s) which you select with a class selector. You are selecting elements shared by both videos when you do this therefore affecting both videos when only one is clicked/hovered.

e.g.

$('.btnPlay').on('click', function() { playpause(); } );

Here you are calling the pause function when either .btnPlay (from either video) is clicked.

You need to only select the video clicked by either using $(this) or this and a combination of parent/child selectors to make sure you are only executing actions for the video that is clicked/hovered.

A couple things you are doing wrong:

1. Ids are unique, you cannot give both video id="myVideo", they need different ids or the same class.
2. In your JS you write, video[0] after video = $("#myVideo") which cannot be done because ids are unique therefore you are only grabbing the first element with that id anyway. video[0] works for you in some of the code, but it nowhere near proper for id selectors.

I recommend using parent/child selectors to make sure you are selecting the right video OR you could just copy the code and have it executed separately for the 2nd video (assuming you fixed the code for the first and created another selector not using #myVideo).

If you look at this fiddle I added a "2" after every class inside the 2nd .videoContainer so your commands would not be selecting it.

http://jsfiddle.net/U4MZ3/30/