Responsive h5p height without overflowing browser window

agapiospanos commented 5 years ago

I recently applied a "hack" (I call it a hack because it not a proper solution) to be able to show the full h5p content in the page and I thought it would be a good idea to share with you. Without this modification the iframe of the h5p overflows the browser window height and displays scrollbars. Thus the navigation bar of the h5p is not visible.

EDIT: as you can see bellow this hack is applicable to the template of course presentation and maybe you have to make adjustments to make it work for other kinds. Thanks to @shippeli for mentioning that... In the comments bellow I also provide the adjustment for the interactive video template. If you make another working adjustment for the other kinds please share in a comment bellow.

The final result is available here: http://dschool.thedevelopers.gr/plastics/

I think it would be great if this functionality is implemented in the code.

Without the "hack". (Please notice the scrollbars at the right)

With the "hack". (There are no scrollbars and the content adjusts the width, so that the h5p never overflows the visible screen)

Here is the code that I used to implement this

<html>
<head>
  <link type="text/css" rel="stylesheet" media="all" href="./dist/styles/h5p.css" />
  <meta charset="utf-8" />
  <script type="text/javascript" src="./dist/js/h5p-standalone-main.min.js"></script>
  <script type="text/javascript">
    (function($) {
      $(function() {
        $('.h5p-container').h5p({
            frameJs: './dist/js/h5p-standalone-frame.min.js',
            frameCss: './dist/styles/h5p.css',
            h5pContent: './workspace',
            displayOptions: { // OPTIONAL hide the frame or download, export etc. buttons they are visible by default
                frame: false,
                copyright: false,
                embed: false,
                download: false,
                icon: false,
                export: false
            }
        });
          $(window).resize(function(){
              let height = window.innerHeight;
              $('.h5p-container').css('max-width', height*1.7777+'px');
          });

          $('iframe').load(function(){
              $(window).trigger('resize');
          })

      });

    })(H5P.jQuery);
  </script>
  <style>
    .h5p-container {
      display: block;
      margin: 0 auto;
    }
    body {
      margin: 0;
    }
  </style>
</head>
  <body>
    <div class="h5p-container"></div>
  </body>
</html>

I calculated the width / height ratio and noticed that it is approximately 1.7777. So I get the height of the window and then adjust the width of the h5p container using this ratio every time the user resizes the window.

Then I trigger the resize event when the iframe loads so that I can achieve the "hack" when the initial load happens.

Finally, I could not resolve the problem with the fullscreen button that is not working.. If someone has a hint about it please help me..

shippeli commented 5 years ago

I think that 1.7777 does only work in your specific setting.

agapiospanos commented 5 years ago

If I am not mistaken I think that h5p uses a 2:1 ratio for the projects.. If you add the control bar at the bottom which includes the progress bar and the next-prev buttons it comes to a 1.7777 ratio. Do you have any example that it did not work so that I can investigate it further?

Thanks for mention this possible problem.

shippeli commented 5 years ago

For example this one looks more like 1:1 https://h5p.org/content-types/agamotto.

agapiospanos commented 5 years ago

Yes it seems that you are right. I am new to h5p and did not explore all the different kind of projects yet.. I also found another example that this did not work and made the adjustment presented bellow... That project was based on an interactive video template and adjustment that I made is the following

$(window).resize(function(){
    let height = window.innerHeight;
    $('.h5p-container').css('max-width', (height*1.7777)-64+'px');
});

Please note the -64 in the adjustment. This is due to the bottom bar of the interactive video player... The link for this example is the following http://dschool.thedevelopers.gr/recycle-signs/

Thus you have to find the adjustment in pixels that you have to make in case there is a bar with standard dimension like in the case of interactive video OR you have to change the 1.7777 ratio.

Jakeii commented 5 years ago

Hi is this specific to h5p-standalone or applies to h5p in general?

agapiospanos commented 5 years ago

Hi Jakeii.

Do you refer to the responsive adjustment code that I provided in the first comment or to the issue that we have and need to make minor adjustments that shippeli pointed out?

What would you like to do with it?

Jakeii commented 5 years ago

I'm just wondering if this applies to regular old h5p as well?

svangoor commented 3 years ago

Hey there, I want to use the code in our site, for same reason. Can you help, where do I need the place the code? regards sander

tunapanda / h5p-standalone

Responsive h5p height without overflowing browser window #28