Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE HTML>
​
<html>
​
<head>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
  <title>GALLERY | UR</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/olton/Metro-UI-CSS/master/build/css/metro.min.css" />
​
<style>
#vii{
width:600px;
height:300px;
}
.slide1{
background:url('http://www.gettyimages.in/gi-resources/images/CreativeImages/Hero-527920799.jpg');
background-size:cover;
background-position:center;
}
#myvideo {
    display:none;
  background:url('http://www.planwallpaper.com/static/images/Alien_Ink_2560X1600_Abstract_Background_1.jpg');
}
.slide-over1 {
    background-color: #C2F3FF;
    opacity:0.85;
}
​
</style>
</head>
​
<body>
<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="" type="video/mp4" />
   </video>
        </div>
        <div class="slide-over slide-over1" id="viii">
             Attack
        </div>
    </div>
</div>
​
​
​
</div>
</div>
</div>
​
  <p>Please remove zoom effect after click</p>
​
​
​
<script type="text/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";
}
myvideo.onplay  = function() { myaudio.play();  }
myvideo.onpause = function() { myaudio.pause(); }
</script>
<script>
new WOW().init();
</script>
​
​
</body>
​
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers