Javascript 在模式中居中Iframe并移除滚动条

我创建了一个模式，在那里我显示一个视频。但是，即使打开模式，我也可以拖动下面的页面。我想，当模态被打开时，它将集中显示视频，而不可能向下移动页面

模式html：

        <div class="trailer">
        <iframe width="854" height="480" src="https://www.youtube.com/embed/B7gyTL--1Uw" frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>>
    
        <span class="close">&times;</span>
    </div>

javascript:

.trailer {

    position: fixed;
    top: 0;
    left: 0;
    transition: all .3s;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .9);
    z-index: 9999;
}

.trailer iframe {
    max-width: 900px;
    outline: none;
    position: relative;
}

@media only screen and (max-width:768px) {

        .trailer iframe {
            max-width: 100%;
        }
}

const button = document.querySelector(".button");
    const close = document.querySelector(".close");
    const trailer = document.querySelector(".trailer");
    const iframe = document.querySelector("iframe");

    button.addEventListener('click', () => {
        trailer.style.visibility = "visible";
        trailer.style.opacity = 1;
    });

    close.addEventListener('click', () => {
        trailer.style.visibility = "hidden";
        trailer.style.opacity = 0;
    });

如何显示的图片：

---

你知道风格的等级是脚本、内联、内部和外部吗？如果设置“内联宽度”，则较低的列组不会影响样式。删除属性

宽度

然后在脚本上，我没有看到任何类按钮

。按钮
。因此，您将
addEventListener
设置为null。这类似于as
null.addEventListener