SOLVED How to embed responsive web app that runs MP4 video?
-
-
- Carl L.
- Sr. Rocketeer
- Posts: 136
- Thanks: 0
-
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: 6 years 2 months ago by Carl L..
-
-
-
- Damir
- Preeminent Rocketeer
- Posts: 22450
- Thanks: 2679
- Web Developer
- Do you have maybe this online and maybe an access so we can test it?
- Available for CUSTOM WORK with Joomla, WordPress and Grav Templates and Gantry Framework!
-
-
-
- Damir
- Preeminent Rocketeer
- Posts: 22450
- Thanks: 2679
- Web Developer
- Can i get access to the site?
- Available for CUSTOM WORK with Joomla, WordPress and Grav Templates and Gantry Framework!
-
-
-
- Carl L.
- Sr. Rocketeer
- Posts: 136
- Thanks: 0
- 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.
- Sr. Rocketeer
- Posts: 136
- Thanks: 0
-
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
- Preeminent Rocketeer
- Posts: 22450
- Thanks: 2679
- Web Developer
-
by auto height what height do you need?
Are you referring to this section right?
This image is hidden for guests.
Please log in or register to see it. - Available for CUSTOM WORK with Joomla, WordPress and Grav Templates and Gantry Framework!
-
-
-
- Carl L.
- Sr. Rocketeer
- Posts: 136
- Thanks: 0
-
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.060 seconds