0
Welcome Guest! Login
0 items Join Now

SOLVED How to embed responsive web app that runs MP4 video?

    • Carl L.'s Avatar
    • Carl L.
    • Sr. Rocketeer
    • Posts: 136
    • Thanks: 0

    SOLVED How to embed responsive web app that runs MP4 video?

    Posted 5 years 7 months ago
    • Hi,

      I have been trying to embed a responsive web app that runs an MP4 video as follows, but without success. First of all, if the URL of the web app's index.html file is entered into a Chrome browser's addres line, it works fine: the video's play button is displayed and when clicked the video fills the screen as much as possible (retaining the aspect ratio). When the same URL is entered in one of the following Joomla! site elements, it does not work as described:

      a) in the URL field of a Gantry 5 "Video" particle ("local video" selected, as the location is a folder of the Joomla site): the result is a black area that resizes responsively to the device screen size and that displays the "Pause" button. Clicking on that button has no effect and the supposed video remains black.

      b) in the URL field of a Joomla! "Wrapper" module that is inserted in an article or in a section of the Flux template's outline: the result allows the video to be played, but the size is very small and of the same height in all screen sizes (setting in Wrapper module: width = 100%, Auto height = yes). After changing the Auto height = No and specifying the height to a value, the height of the video changes accordingly, but is no longer responsive.

      Can anyone suggest how a responsive HTML app that displays a MP4 video (with controls) should be embedded? (This app is not a simple YouTube HTML wrapper).

      Thank you!


      *UPDATE on 30 Aug 18*: I just discovered that option b) (embedding the html5 app via an iFrame) displays the video in it to fit the screen in Safari AND Firefox (13.1) on iOS v. 11.4.1 (on iPad). However, as with all the other tested browsers (Firefox 61.0, Chrome 68.0, IE 11.0), the view jumps from the iFrame to other parts of the page without intervention...

      *2nd UPDATE ON 30 Aug 2018*: I discovered that the same problem exists, if the page on which the HTML5 app is inserted via iFrame is assigned to the Joomla Protostar template, i.e. the issue does not seem to be related to Gantry 5. However, I am hoping to find a way to include such HTML5 apps on a page that is generated with a Gantry 5 template, whether by using a Joomla "Wrapper" module or otherwise...

      Background info: Joomla! 3.8.11, Flux Template.
    • Last Edit: 5 years 6 months ago by Carl L..
    • Damir's Avatar
    • Damir
    • Preeminent Rocketeer
    • Posts: 22450
    • Thanks: 2679
    • Web Developer

    Re: SOLVED How to embed responsive web app that runs MP4 video?

    Posted 5 years 7 months ago
    • Carl L.'s Avatar
    • Carl L.
    • Sr. Rocketeer
    • Posts: 136
    • Thanks: 0

    Re: SOLVED How to embed responsive web app that runs MP4 video?

    Posted 5 years 7 months ago
    • This message contains only secure information that is visible to Damir, moderators and administrators
    • Damir's Avatar
    • Damir
    • Preeminent Rocketeer
    • Posts: 22450
    • Thanks: 2679
    • Web Developer

    Re: SOLVED How to embed responsive web app that runs MP4 video?

    Posted 5 years 7 months ago
    • Carl L.'s Avatar
    • Carl L.
    • Sr. Rocketeer
    • Posts: 136
    • Thanks: 0

    Re: SOLVED How to embed responsive web app that runs MP4 video?

    Posted 5 years 7 months ago
    • This message contains only secure information that is visible to Damir, moderators and administrators
    • Carl L.'s Avatar
    • Carl L.
    • Sr. Rocketeer
    • Posts: 136
    • Thanks: 0

    Re: SOLVED How to embed responsive web app that runs MP4 video?

    Posted 5 years 6 months ago
    • Please see the UPDATE I just added to the original issue description (iFrame works ok in Safari on iOS 11.4.1 etc).
    • Carl L.'s Avatar
    • Carl L.
    • Sr. Rocketeer
    • Posts: 136
    • Thanks: 0

    Re: SOLVED How to embed responsive web app that runs MP4 video?

    Posted 5 years 6 months ago
    • Please also see my "2nd UPDATE" in the original post (problem also occurs with Joomla Protostar template - is there a way of including such HTML5 apps on Gantry 5 - generated pages without the Joomla "Wrapper" module?)
    • Carl L.'s Avatar
    • Carl L.
    • Sr. Rocketeer
    • Posts: 136
    • Thanks: 0

    Re: SOLVED How to embed responsive web app that runs MP4 video?

    Posted 5 years 6 months ago
    • Hi Damir,

      Will you have a chance to look into this issue in the next few days? It would be great, if Gantry 5 would allow the display of HTML5-content in an iFrame with auto-height working, especially as it does not appear to work with Joomla's Protostar template. I have tried inserting different JavaScripts before the iFrame on the page to get auto-height to work, but without success.

      Thanks,

      Carl
    • Damir's Avatar
    • Damir
    • Preeminent Rocketeer
    • Posts: 22450
    • Thanks: 2679
    • Web Developer

    Re: SOLVED How to embed responsive web app that runs MP4 video?

    Posted 5 years 6 months ago
    • Carl L.'s Avatar
    • Carl L.
    • Sr. Rocketeer
    • Posts: 136
    • Thanks: 0

    Re: SOLVED How to embed responsive web app that runs MP4 video?

    Posted 5 years 6 months ago
    • Hi Damir,

      We need the height of the iFrame, in which the interactive video is played in the html5 app, to be the maximum height that is available in the viewport, depending on the size / resolution of the device screen (the html5 app is responsive and retains the video's aspect ratio). Your screenshot demonstrates that this is not happening now, as the video frame is much smaller than the screen size. That is why I have set the "Auto height" button in the mod_wrapper settings to "Yes". Another point about embedding that web app with a mod_wrapper is that the focus jumps away from the video to another place on the page as the video is played... Thanks for your help.

Time to create page: 0.057 seconds