Search code examples
videoiframeembedfullscreenvimeo

iframe Vimeo fullscreen button not showing


For some reason, the Vimeo iframe is missing the fullscreen button. It works if I use the official embed code directly in the HTML, but not this way.

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;
    }

Solution

  • I know this in an old question but I came across a similar issue today and I think I have your answer.

    It looks like you're setting all of the iframe's settings in the "src" attribute. "src" should only contain the link to video.

    Currently you have:

    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"); 
    

    Which should be expanded into these lines:

    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","");
    

    As those settings are all separate attributes and not part of the source.