JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<iframe id="player" width="600" height="350" src="http://player.vimeo.com/video/64075461?api=1&player_id=player" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<div id="1">Video1</div>
<div id="2">Video2</div>
<div id="3">Video3</div>
JavaScript
var player = $f(document.getElementById('player'));
player.addEvent('ready', function() {
player.api('play');
});
$("#1").click(function() {
$iframeSRC = "http://player.vimeo.com/video/65520135?api=1&player_id=player";
$("#player").attr("src",$iframeSRC);
});
$("#2").click(function() {
$iframeSRC = "http://player.vimeo.com/video/65511705?api=1&player_id=player";
$("#player").attr("src",$iframeSRC);
});
$("#3").click(function() {
$iframeSRC = "http://player.vimeo.com/video/65448540?api=1&player_id=player";
$("#player").attr("src",$iframeSRC);
});