I'm using Revolution Slider and when transitioning videos through Carousel, the video loses the default size that I set for my watch page, that is, I determine width:auto and height:768px , but when performing the transition, these videos lose height 768 and are adjusted by the width and 'height' of my monitor resolution automatically. I've tried adjusting with CSS, JS and HTML, but nothing worked.
Does anyone have a solution?
<!-- 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>
Below are two screens of the displayed behavior
You can see the difference of images when looking at the arrows of the carousel (in red)
css used in
.bannercontainer { width: 100%; position: relative; padding: 0; }
.banner { width: 100%; height: 768px; position: relative; padding: 0; }