Tengo un ejemplo aquí: VideoSlide Ejemplo

Mi problema es que no muestra nada.

He efectivamente copiar el código de la Lechuza sitio, pero me estoy poniendo nada se muestran.

Originalmente, había codificado en un sitio más grande, esta es la versión cortada con sólo aplicable para el carrusel. Tengo el carrusel de trabajo con las imágenes, pero los videos me eluden, en todo caso, los videos se ven como deberían ser más sencillo!

Me han dado el último Búho JS y CSS para la versión 2.

No he modificado el JS o CSS, es en que se haya descargado estado.

He hecho un código comparación con el Búho de la página de videos y Calvin College, que también utiliza el Búho carrusel con videos.

Tan lejos como puedo ver, he hecho lo mismo.

Obviamente no he.

Debbie

7 Comentarios

  1. 16

    búho sitio web del vídeo de demostración en realidad tiene un estilo de .elemento de vídeo

    .owl-carousel .item-video{height:300px}

    Añadir que a su propio css, y sus videos se mostrará si se utiliza el mismo marcado como el vídeo de demostración.

    Las opciones mencionadas en la documentación no tienen ningún efecto, así que supongo que podría ser una mejor idea para owl 2.0 para salir de la beta (2.0.0-beta.2.4 en el momento de este post).

    videoWidth: false, //Default false; Type: Boolean/Number
    videoHeight: false, //Default false; Type: Boolean/Number
    • no funciona para mí. La versión 2.2.1
  2. 2

    Un complemento práctico a visitsb la respuesta es el hecho de que la mayoría de los vídeos tienen un conjunto de relación de aspecto (16:9). Así que usted puede utilizar la normal relación de aspecto de relleno de CSS truco para ajustar cada elemento de vídeo en una relación de aspecto fija contenedor.

    Específicamente, envolver los elementos de vídeo como este:

    <div class="fixed-video-aspect"><div class="item-video"> ... </div></div>

    A continuación, agregue el siguiente CSS para solucionar cada elemento en 16:9:

    .owl-carousel .fixed-video-aspect {
      position: relative;
    }
    .owl-carousel .fixed-video-aspect:before {
      display: block;
      content: "";
      width: 100%;
      padding-top: 56.25%;
    }
    .owl-carousel .fixed-video-aspect > .item-video {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  3. 1

    Como visitsb dijo, puede establecer las miniaturas de altura a partir de la CSS. Vas a conseguir un bonito carrusel con un fondo negro.

    Sin embargo, las opciones de los citados en la documentación sólo funcionan cuando se establecen (de código fuente)

    $('.owl-carousel').owlCarousel({
      video: true,
      videoHeight: 300, 
      videoWidth: 600
    });

    El resultado con la primera solución es más bonito.

  4. 1

    Puede utilizar líquido de ancho de contenedores de vídeo para empujar la altura en lugar de la fijación de la altura con css. Haciendo esto, usted puede evitar cualquier negro de bandas y sus vídeos se reproducirán al ras con el contenedor y mantener la proporción perfecta en tamaño.

    <div class="owl-carousel owl-theme">
        <div class="video-wrapper">
            <div class="item-video">
                <div class="owl-video" href="//videourl">

    Tendrá que modificar el css del elemento de vídeo por lo que es jugar bonito.

    .owl-carousel .item-video {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    }

    Además, usted también puede hacer que la imagen de la tapa de relleno de la diapositiva y perder que bandas así.

    .owl-carousel .owl-video-tn {
    background-size: cover !important;
    }

    El video de contenedor que se utiliza 16×9 pero cualquier líquido ancho del contenedor de trabajo. Aquí hay uno que he usado.

    .videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
    }
    .videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

    fuente: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

  5. 0

    Sólo de forma rápida inspección de la consola, parece búho js no está cargado.

    <script src="../assets/owlcarousel/owl.carousel.js"></script>
    • Mientras que usted estaba 100% correcto, que era un cortar y pegar de error, mientras que yo era la copia de la Lechuza demo, y sí, me siento tonto ahora! He puesto de nuevo en el JScript en mi carpeta JS, y aún así no funciona. Así que todavía estoy perplejo.
  6. -1

    Tuve que agregar manualmente a una altura a la .owl-video-wrapper y parece estar bien ahora.

    La esperanza de que esto ayude a alguien en el futuro. Es un poco raro, aunque.

Dejar respuesta

Please enter your comment!
Please enter your name here