Brightcove - Hide image when clicked and display video player.

Brightcove - Hide image when clicked and display video player.

HTML

<script src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script>
<div class="js-container container">
    <div class="content">
        <div class="figure">
            <img src="http://placekitten.com/200/100" alt="Image of a kitten" />
        </div>
        <a href="#" class="js-trigger trigger">View Video</a>
    </div>

   <!-- Start of Brightcove Player -->
   <object id="myExperience921449663001" class="BrightcoveExperience">
       <param name="bgcolor" value="#FFFFFF" />
       <param name="autoStart" value="true" />
       <param name="width" value="100%" />
       <param name="height" value="auto" />
       <param name="playerID" value="2079935931001" />
       <param name="playerKey" value="AQ~~,AAAA1oy1bvE~,ALl2ezBj3WE0z3yX6Xw29sdCvkH5GCJv" />
       <param name="isVid" value="true" />
       <param name="isUI" value="true" />
       <param name="dynamicStreaming" value="true" />
       <param name="@videoPlayer" value="921449663001" />
       
       <!-- smart player api params -->
       <param name="includeAPI" value="true" />
       <param name="templateLoadHandler" value="onTemplateLoad" />
       <param name="templateReadyHandler" value="onTemplateReady" />
    </object>
    <script type="text/javascript">brightcove.createExperiences();</script>
</div>

CSS

.container {
    position:relative;
}

img {
    width: 100%;
    height: auto;
    display: block;
}

.trigger {
    background: url('http://www.anttrader.com/Images/Home/play-button-overlay.png') center center no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    text-indent: -999999em;
    opacity: 0.5;
}

.trigger:hover {
    opacity: 1;
}

.BrightcoveExperience {
    position: absolute;
    top: 0;
    left: -999em;
}

JavaScript

var player,
    modVP;

var onTemplateLoad = function (experienceID) {
  // get references to the player and API Modules and Events
  console.log('onTemplateLoad has loaded');
  player = brightcove.api.getExperience(experienceID);
  modVP = player.getModule(brightcove.api.modules.APIModules.VIDEO_PLAYER);
};

// template ready event handler
var onTemplateReady = function (evt) {
    console.log('onTemplateReady is ready');
    modVP.addEventListener(brightcove.api.events.MediaEvent.PLAY, onMediaEventFired);
};

$('.js-trigger').on('click', function(event) {
    //event.preventDefault();
    $('.content').css({ 'display' : 'none'}); 
    $('.BrightcoveExperience').css({ 'position' : 'static'});
    
    modVP.play(); //I thought this would make the video play.
    modVP.currentTime(7122);
});