Question

我无法通过代码调整视频的高度和宽度。我意识到标准的chrome代码涵盖了这一点。如何解决，谢谢

＆＃13;

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
});*/

＆＃13;

Answer 1

检查此解决方法是否有来自youtube的视频：与.video-wrapper宽度相比，它可以自动调整高度。使用该修复程序，只需调整视频包装父块的大小，您就会成为一个快乐的人。

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>

HTML和JS我可以解决

1 个答案: