Embed iframe - no toolbar until first question/quizz

Submitted by ClarisseB on Fri, 03/04/2022 - 15:48
Forums: 
Developers

Hi everyone,

I need to embed a H5P video in my client's app.

I added the iframe balise and h5p-resizer script.

My problem is that on video launching there is no toolbar (with chapters, play/pause button, ...) and I can't pause the video with space bar.

I have this behavior until the first question or quizz, when I answer the question/quizz and validate the answer the toolbar appears.

I tried to reload the iframe source, not better.

 

Have you got some tips for me please ? 

Thanks !

BV52's picture

BV52

Wed, 03/09/2022 - 17:27

Hi ClarisseB,

In order to give your bug report the best chance of getting answered, please include the following information:

  1. Detailed steps to reproduce the bug (exactly how and when did it happen)
  2. Platform and version number. E.g. Drupal, Wordpress, Moodle.
  3. Mobile or Desktop
  4. Browser: Chrome, Firefox, Safari etc
  5. H5P plugin version
  6. H5P content type and version (if a content type was used), and a sample URL or attached H5P.
  7. Any browser console errors
  8. Any PHP errors
  9. Screenshots if it's a visual problem

If it worked before:

  1. Any recent changes to the environment (new plugins/modules, updates, configuration changes etc.)
  2. Any recent changes to the browser you're using (new extensions, updates etc.)

The more information you provide, the quicker the community will be able to fix it and the quicker you'll have a working solution!

-BV

ClarisseB

Wed, 03/09/2022 - 18:10

  1. Detailed steps to reproduce the bug (exactly how and when did it happen)
  2. Platform and version number. E.g. Drupal, Wordpress, Moodle.
  3. Mobile or Desktop
  4. Browser: Chrome, Firefox, Safari etc
  5. H5P plugin version
  6. H5P content type and version (if a content type was used), and a sample URL or attached H5P.
  7. Any browser console errors
  8. Any PHP errors
  9. Screenshots if it's a visual problem


Thank you for your answer.

I'm a developer and working on a Ruby on Rails web app.

I put the iframe balise and the h5p-resizer script balise :

%script{:charset => "UTF-8", :src => "https://h5p.org/sites/all/modules/h5p/library/js/h5p-resizer.js"}%iframe{:src => @url}


I have the bug in desktop and mobile on Chrome and Mozilla Browsers.

To reproduce the bug you can build a webapp and add the code before.

I have no console error.

Situation is :

- If I do not put the h5p-resizer script balise, I have the video toolbar but the video is not resized

- If I do put the h5p-resizer scrip balise, the video is resized but the toolbar is hiden until I answer a quizz or question.

 

I hope these informations can help.

Thank you

otacke's picture

otacke

Wed, 03/09/2022 - 18:28

Hi!

Seems your implementation is lacking a `resize` event at some point after the content was initialized. It's required to resize the iframe to the content's height.

Best,
Oliver