Video


Vimeo autoplaying embedded videos

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