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);
});
});
} }