0

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

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

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; }

3
  • 1
    Tem como criar um Exemplo Mínimo, Completo e Verificável?
    – Woss
    Commented 26/06/2017 às 21:19
  • Essa informação não me parece ajudar em nada. Tem como você editar a pergunta e adicionar o código que gera esse comportamento? Principalmente que seja verificável, isto é, que nós possamos executar em nossas máquinas ou emuladores e verificar o problema em ação.
    – Woss
    Commented 26/06/2017 às 22:33
  • Foco no conteúdo dos comentários: editar é um link. Use-o.
    – Woss
    Commented 26/06/2017 às 22:36

1 Resposta 1

1

Problema solucionado, na biblioteca própria (jquery.themepunch.revolution.js - jQuery Plugin for Revolution Slider ) existe o default dos valores de height e width:

(function(jQuery,undefined){




    ////////////////////////////////////////
    // THE REVOLUTION PLUGIN STARTS HERE //
    ///////////////////////////////////////

    jQuery.fn.extend({

        // OUR PLUGIN HERE :)
        revolution: function(options) {



                ////////////////////////////////
                // SET DEFAULT VALUES OF ITEM //
                ////////////////////////////////
                defaults = {
                    delay:9000,
                    startheight:768, /* default = 500 */
                    startwidth: vimeoready_auto,  /* default = 960 */             
                    fullScreenAlignForce:"off",
                    autoHeight:"off",
                    hideTimerBar:"off",
                    hideThumbs:200,
                    hideNavDelayOnMobile:1500,

Você deve fazer log-in para responder a esta pergunta.