Estou utilizando Revolution Slider e ao fazer a transição de vídeos pelo o Carousel, o vídeo perde o tamanho predefinido ao qual determinei para a minha página de exibição, ou seja, determino o width:auto
e height:768px
, mas ao realizar a transição, esses vídeos perdem a altura 768
e ficam ajustados pelo width
e 'height' automático da resolução do meu monitor. Já tentei ajustar com CSS, JS e HTML, mas nada funcionou.
Alguém tem alguma solução?
<!-- REVOLUTION SLIDER 4.x SCRIPTS -->
<script type="text/javascript" src="rs-plugin/js/4.6.0/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/4.6.0/jquery.themepunch.revolution.js"></script>
<script type="text/javascript" src="rs-plugin/js/4.6.0/jquery.themepunch.tools.min.js"></script>
<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />
<!-- CONTROLES DE VIDEO -->
<div class="tp-caption tp-fade fadein fullscreenvideo"
data-x="0"
data-y="0"
data-speed="50"
data-start="500"
data-easing="Power4.easeOut"
data-endspeed="1500"
data-endeasing="Power4.easeIn"
data-autoplay="true"
data-nextslideatend="true"
data-forceCover="1"
data-dottedoverlay="twoxtwo"
data-aspectratio="16:9"
data-forcerewind="on"
style="z-index: 5">
<video class="video-js vjs-default-skin"
preload="none"
poster="videos/cybersecurity.jpg"
width="100%"
height="100%"
data-setup="{}">
<source src="videos/cybersecurity.webm" type="video/webm" />
</video>
</div>
</li>
<!-- SLIDE #03 ***** OPRS 5 ***** -->
<li data-transition="random" data-slotamount="7" data-masterspeed="500" data-fstransition="random" data-fsmasterspeed="500" data-fsslotamount="7" data-delay="2000">
<!-- CONTROLES DE VIDEO -->
<div class="tp-caption tp-fade fadein fullscreenvideo"
data-x="0"
data-y="0"
data-speed="50"
data-start="500"
data-easing="Power4.easeOut"
data-endspeed="1500"
data-endeasing="Power4.easeIn"
data-autoplay="true"
data-nextslideatend="true"
data-forceCover="1"
data-dottedoverlay="twoxtwo"
data-aspectratio="16:9"
data-forcerewind="on"
style="z-index: 5">
<video class="video-js vjs-default-skin"
preload="none"
poster="videos/servers.jpg"
width="100%"
height="100%"
data-setup="{}">
<source src="videos/servers.webm" type="video/webm" />
</video>
</div>
</li>
<!-- SLIDE #05 ***** PROCESSOS E PROJETOS ***** -->
<li data-transition="random" data-slotamount="7" data-masterspeed="500" data-fstransition="random" data-fsmasterspeed="500" data-fsslotamount="7" data-delay="2000">
<!-- LAYERS -->
<!-- CONTROLES DE VIDEO -->
<div class="tp-caption tp-fade fadein fullscreenvideo"
data-x="0"
data-y="0"
data-speed="50"
data-start="500"
data-easing="Power4.easeOut"
data-endspeed="1500"
data-endeasing="Power4.easeIn"
data-autoplay="true"
data-nextslideatend="true"
data-forceCover="1"
data-dottedoverlay="twoxtwo"
data-aspectratio="16:9"
data-forcerewind="on"
style="z-index: 5">
<!-- HERANÇA POSTER INSERIDA EM 12/01/2016 EM TESTES -->
<video class="video-js vjs-default-skin"
preload="none"
poster="videos/process_imagem.jpg"
width="100%"
height="100%"
data-setup="{}">
<source src="videos/process_low.webm" type="video/webm" />
</video>
</div>
</li>
<!-- SLIDE #07 ***** CLOUDING COMPUTING ****** -->
<li data-transition="random" data-slotamount="7" data-masterspeed="500" data-fstransition="random" data-fsmasterspeed="500" data-fsslotamount="7" data-delay="2000">
<!-- LAYERS -->
<!-- CONTROLES DE VIDEO -->
<div class="tp-caption tp-fade fadein fullscreenvideo"
data-x="0"
data-y="0"
data-speed="50"
data-start="500"
data-responsive_offset=”on”
data-easing="Power4.easeOut"
data-endspeed="1500"
data-endeasing="Power4.easeIn"
data-autoplay="true"
data-nextslideatend="true"
data-forceCover="1"
data-dottedoverlay="twoxtwo"
data-aspectratio="16:9"
data-forcerewind="on"
style="z-index: 5">
<video class="video-js vjs-default-skin"
preload="none"
poster="videos/cloud_computing.jpg"
width="100%"
height="100%"
data-setup="{}">
<source src="videos/cloud_computing1.webm" type="video/webm" />
</video>
</div>
</li>
<!-- SLIDE #09 ***** ?????? ***** -->
<li data-transition="random" data-slotamount="7" data-masterspeed="500" data-fstransition="random" data-fsmasterspeed="500" data-fsslotamount="7" data-delay="2000">
<!-- CONTROLES DE VIDEO -->
<div class="tp-caption tp-fade fadein fullscreenvideo"
data-x="0"
data-y="0"
data-speed="50"
data-start="500"
data-easing="Power4.easeOut"
data-endspeed="1500"
data-endeasing="Power4.easeIn"
data-autoplay="true"
data-nextslideatend="true"
data-forceCover="1"
data-dottedoverlay="twoxtwo"
data-aspectratio="16:9"
data-forcerewind="on"
style="z-index: 5">
<video class="video-js vjs-default-skin"
preload="none"
poster="videos/ambiente_imagem.jpg"
width="100%"
height="100%"
data-setup="{}">
<source src="videos/ambiente_low.webm" type="video/webm" />
</video>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- ========================================================
Revolution Slider Screen Controls - DO NOT CHANGE !
==========================================================-->
<script type="text/javascript">
var revapi = null;
revapi;
jQuery(document).ready(function() {
revapi = jQuery('.tp-banner').revolution({
delay: 15000,
hideThumbs: 10,
fullWidth: "off",
fullScreen: "off",
touchenabled: "off",
onHoverStop: "off",
videoJsPath: "rs-plugin/videojs/"
});
}); //ready
</script>
segue abaixo duas telas do comportamento apresentado
vocês conseguem perceber a diferença de imagens ao olhar para as flechas do carousel (em vermelho)
css utilizado nos
.bannercontainer { width:100%; position:relative; padding:0; }
.banner{ width:100%; height: 768px; position:relative; padding:0; }