iframe Vimeo 全屏按钮不显示
iframe Vimeo fullscreen button not showing
由于某种原因,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;
}
我在一个老问题中知道这一点,但我今天遇到了一个类似的问题,我想我有你的答案。
您似乎在“src”属性中设置了 iframe 的所有设置。 “src”应该只包含 link 到视频。
目前你有:
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","");
因为这些设置都是单独的属性,而不是源的一部分。
由于某种原因,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;
}
我在一个老问题中知道这一点,但我今天遇到了一个类似的问题,我想我有你的答案。
您似乎在“src”属性中设置了 iframe 的所有设置。 “src”应该只包含 link 到视频。
目前你有:
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","");
因为这些设置都是单独的属性,而不是源的一部分。