Make H5P Quiz Images Go Big by Default

Forest xGump on a bench with the text simple is as simple does.

When you add images to H5P questions, the default behavior is to present them small. You can then click to make them go full size.

We didn’t want to do that with the histology stuff. Luckily you can override the css as described here.

//MODIFY H5P QUIZ IMAGES TO GO FULL SCREEN

function h5p_full_img_alter_styles(&$styles, $libraries, $embed_type) {
  $styles[] = (object) array(
    // Path must be relative to wp-content/uploads/h5p or absolute.
    'path' => get_stylesheet_directory_uri() . '/custom-h5p.css',  //this is in the functions file of a child theme . . . . you'd do other stuff if it wasn't
    'version' => '?ver=0.1' // Cache buster
  );
}
add_action('h5p_alter_library_styles', 'h5p_full_img_alter_styles', 10, 3);
.h5p-column-content.h5p-image > img, .h5p-question-image-scalable  {
  width: 100% !important;
  height: auto !important;
  max-width: 100%  !important;
}

I didn’t test this against other H5P options so it may do more than other people would like but we’re only using quizzes so this is fine.

Jeff also got us most of the way there with some javascript and could have done it all that way as well.

iframe.contentWindow.document.querySelectorAll('.h5p-question-image-wrap.h5p-question-image-scalable')[0].style.width = '100%';