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

【问题标题】：How to make a video play in popup window? starting from iframe如何在弹出窗口中播放视频？从 iframe 开始
【发布时间】：2020-12-10 09:18:10
【问题描述】：

我是一般网站建设和开发的新手。我正在用 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%;
    }

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

【问题讨论】：

标签： javascript html css iframe jamstack

【解决方案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%;
}

【讨论】：