javascript - 如何在弹出窗口中播放视频？从 iframe 开始

Question

一般来说，我是建立网站和开发的新手。我正在用 iframe 中的视频构建一个静态站点，这些 iframe 也在容器 div 中。像这样

<div class="container">
<iframe src="https://player.vimeo.com/video/4***" width="560" height="315" frameborder="0" allow="autoplay; fullscreen" allowfullscreen id="frame1"> </iframe>
</div>

我的 iframe 的 CSS 是这样的：

iframe{
        width:185px;
        height:185px;
        border-radius: 50%;
    }

我正在尝试让视频在更大的“弹出”窗口中播放。不离开页面。但我一无所知。有人可以让我走上正轨吗？

Answer 1

单个更改（定义容器类而不是 iframe 的样式）将提供所需的输出：

<div class="container">
    <iframe src="https://player.vimeo.com/video/4***" width="560" height="315" frameborder="0" allow="autoplay; fullscreen" allowfullscreen id="frame1"></iframe>
</div>

.container{    //define styles for container class instead of iframe
    width:185px;
    height:185px;
    border-radius:50%;
}