How to remove zoom effect of tile(metro ui css) using javascript

Question

I have created a tile(metro ui css) and the tile does following:

• On click a video is played.
• The slide right effect is not displayed(on click).

I cannot remove the zoom effect of the tile.I have tried removing tile class,but it is not working.Please help me to remove the zooming effect after the tile is clicked.Here is the code.

HTML

<div class="container">
<div class="row">
<div class="col-md-6">
<div class="tile" id="vii">
<div class="tile-content slide-right" >
        <div class="slide slide1">
            <video id="myvideo" controls muted>
                <source src="1.mp4" type="video/mp4" />
            </video>
        </div>
    <div class="slide-over slide-over1" id="viii">
         Attack by Smit
    </div>
</div>
</div>
</div>
</div>
</div>

JavaScript

var myvideo = document.getElementById("myvideo");
var myaudio = document.getElementById("myaudio");
document.getElementById("vii").onclick=function(){
myvideo.play();
myvideo.style.display="block";
myvideo.style.width="600px";
myvideo.style.height="300px";
document.getElementById("viii").style.display="none";
}

Here is code snippet:

http://jsbin.com/tujakasuci/1/edit?html,output

Thank You!!

Answer 1

You should OnClick, remove slide-right Class. The zoom effect come from this class:

document.getElementById("vii").onclick=function(){
    $('.tile-content').removeClass("slide-right");
    myvideo.play();
    myvideo.style.display="block";
    myvideo.style.width="600px";
    myvideo.style.height="300px";
    document.getElementById("viii").style.display="none";
}