jquery: vimeo embed switch
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="buttons">
<button data-src="https://player.vimeo.com/video/8733915">
Video 1
</button>
<button data-src="https://www.youtube.com/embed/hP9rBDYYFvw?autoplay=1">
Video 2
</button>
</div>
<div id="wrapper">
<iframe src="https://www.youtube.com/embed/hP9rBDYYFvw?autoplay=1" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p>
overlay
</p>
</div>
<footer>
<a href=#>
FOOTER LINK
</a>
</footer>
CSS
#wrapper {
position: relative;
padding: 0;
margin: 0;
width: 500px;
height: 300px;
}
#wrapper iframe {
position: absolute;
top: 0;
left: 0;
}
#wrapper p {
color: #fff;
position: absolute;
bottom: 50px;
right: 10px;
z-index: 9999;
}
button:active {
color: #fff;
}
footer a:active {
color: red;
}
JavaScript
$(document).ready(function() {
$("#buttons button").click(function(e) {
var a = $(this).attr('data-src');
$("#wrapper iframe").attr("src", a);
// $(this).toggleClass("active");
});
});