2017-11-10 53 views
-3
http://binsi.xyz/trending.php

开放 源I不能调整的高度和宽度为通过代码的视频。我意识到这是由标准的Chrome代码覆盖的。如何解决它,谢谢HTML和JS我可以通过浏览器</p> <p>固定

var videoswiper = new Swiper($(".videoswiper"), { 
 
    autoplay: 6000, 
 
    pagination: false, 
 
    slidesPerView: 3, 
 
    spaceBetween: 0, 
 
    loop: false, 
 
    grabCursor: false, 
 
    breakpoints: { 
 
    1280: { 
 
     slidesPerView: 3 
 
    }, 
 
    800: { 
 
     slidesPerView: 2 
 
    }, 
 
    640: { 
 
     slidesPerView: 1 
 
    } 
 
    }, 
 
    nextButton: ".videoswiper .swiper-button-next", 
 
    prevButton: ".videoswiper .swiper-button-prev", 
 
    onPaginationRendered: function(swiper, paginationContainer) { 
 
    var numberOfBullets = swiper.params.loop 
 
     ? Math.ceil(
 
      (swiper.slides.length - swiper.loopedSlides * 2)/
 
      swiper.params.slidesPerGroup 
 
     ) 
 
     : swiper.snapGrid.length; 
 
    //console.log('numberOfBullets: '+numberOfBullets); 
 
    if (numberOfBullets < 2) { 
 
     swiper.paginationContainer.css({ 
 
     display: "none" 
 
     }); 
 
    } else { 
 
     swiper.paginationContainer.css({ 
 
     display: "block" 
 
     }); 
 
    } 
 
    } 
 
}); 
 
$('.videoswiper .swiper-slide').each(function(index, element) { 
 
    var href = $(element).find('.card-img a').attr('href'); 
 
    $(element).magnificPopup({ 
 
    items: { 
 
     src: href 
 
    }, 
 
    type: 'iframe' 
 
    }); 
 
}); 
 

 
/*$(".popup-youtube, .popup-vimeo, .popup-gmaps").magnificPopup({ 
 
    disableOn: 700, 
 
    type: "iframe", 
 
    mainClass: "mfp-fade", 
 
    removalDelay: 160, 
 
    preloader: false, 
 
    fixedContentPos: false 
 
});*/

回答

0

检查此变通视频从YouTube:这 使得HEIGH自动调整大小的比较。视频封装宽度。 使用该修补程序并调整视频包装父母块的大小,您将成为一个快乐的人。

CSS

.video-wrapper{ 
    position:relative; 
    padding-bottom:56.25%; 
    padding-top:30px; 
    height:0; 
    overflow:hidden; 
} 
.video-wrapper iframe, 
.video-wrapper object, 
.video-wrapper embed{ 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
} 


<div class="video-wrapper"> 
    <iframe width="100%" src="https://www.youtube.com/embed/5egWsism7Eg" frameborder="0" allowfullscreen></iframe> 
</div> 
相关问题