iframe Vimeo 全屏按钮未显示

Posted 2023-03-13

【中文标题】iframe Vimeo 全屏按钮未显示

【英文标题】：iframe Vimeo fullscreen button not showing

【发布时间】：2020-07-21 13:40:36

【问题描述】：

由于某种原因，Vimeo iframe 缺少全屏按钮。如果我直接在 html 中使用官方嵌入代码就可以了，但不是这样。

JS：

var iframe = document.createElement("iframe");
var videoid = document.querySelector(".active .video-id");
videoid.setAttribute("src", "allow='autoplay; fullscreen' webkitallowfullscreen mozallowfullscreen allowfullscreen"); 
iframe.setAttribute("src", "https://player.vimeo.com/video/" + videoid.id + "?autoplay=1&portrait=0&title=0 width='100' height='100' frameborder='0' allow='autoplay; fullscreen' webkitallowfullscreen mozallowfullscreen allowfullscreen"); 
videoid.appendChild(iframe);

CSS：

    .video-id 
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
        z-index: -1;
        pointer-events: none;
    
    .video-id iframe,  
    .video-id object,  
    .video-id embed 
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: auto;
    

【参考方案1】：

我在一个老问题中知道这一点，但我今天遇到了一个类似的问题，我想我有你的答案。

您似乎在“src”属性中设置了所有 iframe 的设置。 “src”应该只包含视频的链接。

目前你有：

iframe.setAttribute("src", "https://player.vimeo.com/video/" + videoid.id + "?autoplay=1&portrait=0&title=0 width='100' height='100' frameborder='0' allow='autoplay; fullscreen' webkitallowfullscreen mozallowfullscreen allowfullscreen"); 

应该扩展成以下几行：

iframe.setAttribute("src", "https://player.vimeo.com/video/" + videoid.id + "?autoplay=1&portrait=0&title=0");
iframe.setAttribute("width","100");
iframe.setAttribute("height","100");
iframe.setAttribute("frameborder","0");
iframe.setAttribute("allow","autoplay; fullscreen");
iframe.setAttribute("webkitallowfullscreen","");
iframe.setAttribute("mozallowfullscreen","");
iframe.setAttribute("allowfullscreen","");

因为这些设置都是单独的属性，而不是源的一部分。

【讨论】：

iframe.setAttribute("allow","autoplay; fullscreen"); 应该是iframe.setAttribute("allow","autoplay");。