0
I’m using Revolution Slider and when transitioning videos through Carousel, the video loses the default size I determined for my display page, that is, I determine the width:auto and height:768px, but when making the transition, those videos lose the height 768 and are adjusted by width and automatic height of my monitor resolution. I have tried to adjust with CSS, JS and HTML, but nothing worked.
Does anyone have any 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>
follows below two screens of the behavior presented
You can tell the difference in images by 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; }
It has how to create a [mcve]?
– Woss
This information doesn’t seem to help me at all. Is there a way you [Edit] the question and add the code that generates this behavior? Mainly that it is verifiable, that is, that we can run on our machines or emulators and check the problem in action.
– Woss
Focus on comment content: [Edit] is a link. Use it.
– Woss