Estudi Llimona

Estudio interactivo
diseño & programación web

Vídeo de vimeo sin controles y a fullsize con slider revolution

Si quieres tener un vídeo a fullsize sin controles procedente de vimeo con el slider revolution esto son los pasos que tienes que seguir.

Aunque por defecto el slider revolution te da la opción de meter un vídeo como una capa hay que meterle un poco de código para quitarle los controles.

En la ventana del slide

  1. Introducir el vídeo dejando las casillas de “Fullscreen” y “Force Cover” sin clicar.

  2. Centrar el vídeo

 

En la ventana principal de configuración del slider ir a la sección (al final) de CSS / JavaScript e introducir el siguiente código CSS

  1. Introducir Javascript y CSS

 

 

CSS

[code lang=”css”].tp-videolayer {left: 0 !important; top: 0 !important}[/code]

Javascript

[code lang=”js”]// change "revapi1" to whatever api name is assigned to your slider
var mySlider = revapi1.on(‘revolution.slide.onloaded’, function() {

sizer();
jQuery(window).on(‘resize’, sizer);
mySlider.on(‘revolution.slide.onchange’, sizer);

});

function sizer() {

var sliderWidth = mySlider.width(),
sliderHeight = mySlider.height();

mySlider.find(‘.tp-videolayer’).each(function() {

var $this = jQuery(this);
if(!$this.attr(‘data-vimeoid’) && !$this.attr(‘data-ytid’)) return;

var posX = $this.attr(‘data-x’),
posY = $this.attr(‘data-y’),
oWidth = parseInt($this.attr(‘data-videowidth’), 10),
oHeight = parseInt($this.attr(‘data-videoheight’), 10),
videoHeight,
videoWidth;

if(sliderWidth > sliderHeight) {

videoWidth = sliderWidth;
videoHeight = Math.ceil((sliderWidth / oWidth) * oHeight);

}
else {

videoHeight = sliderHeight;
videoWidth = Math.ceil((sliderHeight / oHeight) * oWidth);

}

$this.width(videoWidth).height(videoHeight).
children(‘iframe’).width(videoWidth).height(videoHeight).css({

marginTop: posY === ‘center’ ? -(((videoHeight – sliderHeight) / 2) | 0) :
posY === ‘bottom’ ? -((videoHeight – sliderHeight) | 0) : 0,

marginLeft: posX === ‘center’ ? -(((videoWidth – sliderWidth) / 2) | 0) :
posX === ‘right’ ? -((videoWidth – sliderWidth) | 0) : 0

});

});

}[/code]

 

 

 

Add comment

... equipo multidisciplinar

Este sitio web utiliza cookies para que tengas una mejor experiencia de usuario. Si continuas navegando estás dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies. Haz click en el enlace para mayor información.

ACEPTAR
Aviso de cookies