JSFiddle - React, Tailwind, and code Playground

by Sunny SM

HTML

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="http://jacobnewman.co.uk/test/vimeo/dist/jquery.vimeo.api.min.js"></script>

<!-- Vimeo Player -->
<iframe id="myvideo" src="//player.vimeo.com/video/143896427?background=1" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<div id="mute-unmute"></div>

CSS

#mute-unmute {
    background-color:transparent !important; /*transparent*/
    position:fixed;
    top:8px;
    left:8px;
    width:500px;
    height:281px;
    z-index:99999;
    opacity:0.4;
    display: block;
    background-position: center;
    cursor: pointer;
}
/*
#play-pause {
        background: url("http://unclebarts.co.uk/wp-content/themes/bungabunga_bootstrap/img/video-controls/pause.png") no-repeat;
    width: 50px;
    height: 56px;
    display: block;
    background-size: 100% auto;
    background-position: center;
    cursor: pointer;
    float: left;
    margin: 10px    
}
ref:url http://jsfiddle.net/jakeoblivion/phytdt9L/5/
*/

JavaScript

//load video muted
  var video = $("#myvideo");
  video.vimeo("play");
  video.vimeo("setVolume", 0);

	//toggle play/pause
  /*
  $('#play-pause').click(function() {
    $(this).toggleClass('play');
    if ($(this).hasClass('play')) {
      //pause video
      video.vimeo("pause");
      $(this).css('background', 'url("http://unclebarts.co.uk/wp-content/themes/bungabunga_bootstrap/img/video-controls/play.png") no-repeat');
    } else {
      //unpause video
      video.vimeo("play");
      $(this).css('background', 'url("http://unclebarts.co.uk/wp-content/themes/bungabunga_bootstrap/img/video-controls/pause.png") no-repeat');
    }
  });
	*/
  //toggle mute/unmute
  $('#mute-unmute').click(function() {
  console.log(5241);
    $(this).toggleClass('mute');
    if ($(this).hasClass('mute')) {
  		video.vimeo("setVolume", 1);
      video.vimeo("play");
    } else {
  		video.vimeo("setVolume", 0);
      video.vimeo("pause");
    }
  });