Search code examples
javavaadinfullscreenvaadin7

Inserting a Vimeo video in a Vaadin 7 BrowserFrame

I have this vaadin video with ID 123456. I need to insert it in a Vaadin 7* application using a BrowserFrame, I need the inserted video to show the "fullscreen" button (and hide some other elements), but I'm not managing to get it working.

Right now, I have this:

    StringBuilder resourceBuilder = new StringBuilder("https://player.vimeo.com/video/");
    resourceBuilder.append(vimeoId);
    resourceBuilder.append("?byline=0&portrait=0");

    BrowserFrame eVimeo = new BrowserFrame("", new ExternalResource(resourceBuilder.toString()));
    eVimeo.setWidth("800px");
    eVimeo.setHeight("450px");

The thing is that the URL resulting from the StringBuilder, if put directly in the browser, do shows the "fullscreen" button, but when embedded in the BrowserFrame, does not.

Finding information about this is becoming a real PITA, as we are on a non-suported version of Vaadin and most of information I've found is about adding Vaadin to an HTML page and not the other way around.

Any ideas on what to do?

* Yeah, we're updating in the future.

Solution

  • Based on the link what I commented you probalbly need to do something like this

    BrowserFrame eVimeo = new BrowserFrame("Video", new ExternalResource(resourceBuilder.toString()));
eVimeo.setId("vimeoVid");
... add frame to layout ...
JavaScript.getCurrent().execute("document.getElementById('vimeoVid').childNodes[0].setAttribute('allowfullscreen','allowfullscreen')");

    And probably you need to set those three other attributes as well

    This should work also in Vaadin 8.