fancyboxv5.0视频宽度比低版本窄调宽的解决方案

5.0版本的显示效果↓
其他版本的显示效果↓

存在问题的js源代码

  //这里的宽度没有效果
  const options = {
    width:1000, 
    Thumbs: {
      type: "classic",
    },
    Toolbar: {
      display: {
        left: ["infobar"],
        middle: [
          "zoomIn",
          "zoomOut",
          "toggle1to1",
          "rotateCCW",
          "rotateCW",
          "flipX",
          "flipY",
        ],
        right: ["slideshow", "thumbs", "close"],
      },
    },
  }
  //这里5.0版本设置之后会报错找不到fancybox方法，但是旧版本没问题
  // $('.fancybox').fancybox({
  //         autoScale:false,
  //         maxWidth:500,
  //         maxHeight:400
  //     });

  Fancybox.bind("[data-fancybox]", options);
  console.log(Fancybox)

//根据github官网的options设置也没反应
https://fancyapps.com/fancybox/api/options/#width

//解决方法：重写css
.has-youtube .fancybox__content, .has-vimeo .fancybox__content, .has-html5video .fancybox__content{
        width: 100% !important;
        height: auto !important;
}