required
<script src="//f.vimeocdn.com/js/froogaloop2.min.js"></script>html
<div class="vimeo_video"> <img src="{{MEDIA_URL}}resized/large/{{video.image.uploaded_file}}" alt="{{image.image_alt}}"> <iframe class="mobile_hide_inline" src="https://player.vimeo.com/video/{{video.video_vimeo}}?background=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe><div class="vimeo_buttons"> <button target="_blank" class="vimeo_mute_toggle mobile_hide_inline" data-link="https://player.vimeo.com/video/{{video.video_vimeo}}">Mute</button> <button target="_blank" class="vimeo_video_link mobile_hide_inline" data-link="https://player.vimeo.com/video/{{video.video_vimeo}}?autoplay=1&loop=1&color=ffffff&title=0&byline=0">Full screen</button> <button target="_blank" class="vimeo_video_link mobile_show" data-link="https://player.vimeo.com/video/{{video.video_vimeo}}?autoplay=1&loop=1&color=ffffff&title=0&byline=0">Watch Video</button> </div></div>scss
.vimeo_video{ position: relative; img{ max-width: 100%; position: relative; z-index: 2; @include opacity(0); @include at-query ($max, $inbetween) { @include opacity(1); } } iframe{ position: absolute; top: 0; min-width: 100%; left: 0; min-height: 100%; @include at-query ($max, $inbetween) { display: none; } } .vimeo_buttons{ z-index: 2; position: absolute; bottom: 0; right: 0; } .vimeo_video_link,.vimeo_mute_toggle { opacity: 0; border-radius: 0; border: none; @include vendorize(transition,opacity 0.5s ease-in-out); @include at-query ($max, $inbetween) { opacity: 1; } } .vimeo_mute_toggle_strike{ text-decoration: line-through; } &:hover .vimeo_video_link,&:hover .vimeo_mute_toggle{ opacity: 1; } }script
app.vimeo = { init: function() { $('.vimeo_video iframe').each(function(i, el) { var player = $f(el), mute_button = $(el.parentNode).find(".vimeo_mute_toggle"), video_link = $(el.parentNode).find(".vimeo_video_link"); mute_button.click(function(e) { e.preventDefault(); if ($(this).hasClass("vimeo_mute_toggle_strike")) { player.api('setVolume', 1); $(this).removeClass("vimeo_mute_toggle_strike") } else { player.api('setVolume', 0); $(this).addClass("vimeo_mute_toggle_strike") } return false; }) mute_button.addClass("vimeo_mute_toggle_strike") video_link.click(function(e) { event.preventDefault(); var w = $(window).width(), h = $(window).height(); var strWindowFeatures = "menubar=no,location=no,resizable=no,scrollbars=no,status=no,width=" + w + "px,height=" + h + "px"; window.open($(this).data("link"), "video", strWindowFeatures); return false; }); player.addEvent('ready', function() { player.api('setVolume', 0); }); });} }