Questo script mi è servito per far vedere un video Vimeo diverso per ogni tipo di dispositivo usando le Api di Vimeo.
Per esempio, su un pc veniva mostrato un bel video 16:9, mentre su uno smartphone veniva mostrato un video allungato quasi a tutto schermo.
Questa cosa si poteva fare benissimo con un CSS, ma il problema erano le scritte nel video originale tutte a sinistra. Su un telefonino venivano completamente tagliate e quindi ci si è mossi verso questa direzione.
<div id="maravmeo"></div>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
(function ($) {
$(document).ready(function () {
var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
if (windowWidth < 768 ) {
//mobile
var options = {
url: "https://player.vimeo.com/video/3414985930",
//width:100,
background: 1,
muted:0,
badge:0
};
} else if (windowWidth >= 768 && windowWidth < 1200) {
//Mobile
var options = {
url: "https://player.vimeo.com/video/00194860515",
//width:100,
background: 1,
muted:0,
badge:0
};
}
else {
//Tablet
var options = {
url: "https://player.vimeo.com/video/7830260854",
//width:100,
background: 1,
muted:0,
badge:0
};
}
var videoPlayer = new Vimeo.Player('maravmeo', options);
videoPlayer.on('play', function() {
console.log('Played the video');
});
var mute= $('.mute');
var unmute =$('.unmute');
unmute.on('click touch', function(e){
videoPlayer.setMuted(0);
$(this).css("display", "none");
$(this).parent('.trigger-volume').find('.mute').css("display", "block");
});
mute.on('click touch', function(e){
videoPlayer.setMuted(1);
$(this).css("display", "none");
$(this).parent('.trigger-volume').find('.unmute').css("display", "block");
});
$(window).resize(function(){location.reload();});
});
})(jQuery);
</script>
