Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!-- Html structure -->
<div class="video-wrap">
<iframe class="embed-player" width="100%" height="100%" src="https://www.youtube.com/embed/mQWxbjjn0gw?enablejsapi=1&controls=1&fs=0&iv_load_policy=3&rel=0&showinfo=0&loop=0" frameborder="0" allowfullscreen></iframe>
</div>
<script type="text/javascript">
// Youtube video player function
var videoWrap = $(".video-wrap"),
iframes = videoWrap.find('.embed-player');
// POST commands to YouTube or Vimeo API
function postMessageToPlayer(player, command){
if (player == null || command == null) return;
player.contentWindow.postMessage(JSON.stringify(command), "*");
}
// When the slide is changing
function playPauseVideo(wrapper, control){
var player;
player = wrapper.find("iframe").get(0);
//startTime = currentSlide.data("video-start");
switch (control) {
case "play":
postMessageToPlayer(player, {
"event": "command",
"func": "mute"
});
postMessageToPlayer(player, {
"event": "command",
"func": "playVideo"
});
break;
case "pause":
postMessageToPlayer(player, {
"event": "command",
"func": "pauseVideo"
});
break;
}
}
// Resize player
function resizePlayer(iframes, ratio) {
if (!iframes[0]) return;
var win = $(".video-wrap"),
width = win.width(),
playerWidth,
height = win.height(),
playerHeight,
ratio = ratio || 16/9;
iframes.each(function(){
var current = $(this);
if (width / ratio < height) {
playerWidth = Math.ceil(height * ratio);
current.width(playerWidth).height(height).css({
left: (width - playerWidth) / 2,
top: 0
});
} else {
playerHeight = Math.ceil(width / ratio);
current.width(width).height(playerHeight).css({
left: 0,
top: (height - playerHeight) / 2
});
}
});
}
$(".play-btn").click(function (e) {
e.preventDefault();
playPauseVideo(wrappper, "play");
//$(".video-pause").show();
});
$(".paus-btn").click(function (e) {
e.preventDefault();
playPauseVideo(wrappper, "pause");
//$(".video-pause").show();
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment