H5P in Bootstrap elements

Submitted by lernkiste on Sun, 12/09/2018 - 17:28
Forums: 
Developers

Hi everybody!

I‘m currently making a website using the bootstrap (4) framework. When I try to embed H5P content via iframe, it only shows the h5p content in a mininal height. I could manually specify the hight via the <style> tag, but I‘m wondering if there is a more elegant solution, one which would also be responsive, of course!

Has one of you alredy gathered experience using h5p elements in bootstrap websites?

 

Christian

Summary: 
bootstrap
icc's picture

icc

Tue, 12/11/2018 - 09:25

Hi Christian,

You need to include the <script> tag that is together with the <iframe> tag when embedding. This will enable automatic resize of the iframe.

If for security reasons the script tag is stripped away you could edit your template or theme and always include the script tag on your pages.

lernkiste

Tue, 12/11/2018 - 12:37

Hi!

I included the script and it isn't stripped away (I'm opening the html file on a local server in a controlled environment, so I'm sure). Resizing the content itself does work, but only if I give the element which contains the iframe an absolute height. Of course, that's not a feasible solution when trying to make a responsive website ... (I'm using bootstrap and the grid system, btw) :/

lernkiste

Wed, 12/12/2018 - 08:16

I just wanted to post the solution to the problem just in case anybody else is researching the same issue:

When embedding h5p content via iframe, you don't need the responsive embed classes from bootstrap. All the responsive resizing is automatically done via the script provived by h5p itself.

Thanks @otacke for the great support!

Christian 

otacke's picture

otacke

Wed, 12/12/2018 - 09:10

You're welcome!