Bootstrap 3 Collapse Play Video

Dynamically send collapse div ID to mediaelement player to pause each video inside panel-body of collapsed DIV.

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/2.18.2/mediaelementplayer.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/2.18.2/mediaelement-and-player.min.js"></script>
<div class="container">
<div class="panel-group video" id="accordion" role="tablist" aria-multiselectable="true">
			<div class="panel panel-default">
				<div class="panel-heading" role="tab" id="headingOne">
					<h4 class="panel-title">
						<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
							Collapse One
						</a>
					</h4>
				</div>
				<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
					<div class="panel-body">
						<video src="http://mediaelementjs.com/media/echo-hereweare.mp4" poster="http://mediaelementjs.com/media/echo-hereweare-540x304.jpg" width="100%" height="100%" style="width:100%; height:100%;">
					</div>
				</div>
			</div>
			<div class="panel panel-default">
				<div class="panel-heading" role="tab" id="headingTwo">
					<h4 class="panel-title">
						<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
							Collapse Two
						</a>
					</h4>
				</div>
				<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
					<div class="panel-body">
						<video src="http://mediaelementjs.com/media/echo-hereweare.mp4" poster="http://mediaelementjs.com/media/echo-hereweare-540x304.jpg" width="100%" height="100%" style="width:100%; height:100%;">
					</div>
				</div>
			</div>
			<div class="panel panel-default">
				<div...

JavaScript

$(document).ready(function(){

    $(function () {
        $('.panel-collapse').each(function (k, v) {
            $video = $(v).find('video');
            var player = new MediaElementPlayer($video);
            $(v).on('hidden.bs.collapse', function (e) {
                player.pause();
            });
        });
    });

});