embedded H5P in modal window
Hello,
I am trying to embed a H5P material from my wordpress site into a modal window in a Moodle site. The idea is to use it as a tooltip for my students if they have questions during a quiz but use a modal window to save space.
I have tried embedding images, youtube videos and prezis, everything works fine but when I embed a H5P only the bottom bar is displayed until I click in any of the bottom bar buttons (embed or reuse) of the H5P, then the whole H5P appears.
I was wondering if there is any workaround so the whole H5P is displayed once the modal window is open.
I am using Moove Theme.
Here is the code for the Modal Window:
<!-- Trigger the modal with a button -->
<p dir="ltr" style="text-align: center;"><button type="button" src="/media/examples/login-button.png" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Ayuda para la teoría<br><img src="https://aula.estudiomusica.com/draftfile.php/5/user/draft/818385390/AYUD..."></button>
<!-- Modal -->
</p>
<div id="myModal" class="modal fade" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<p dir="ltr" style="text-align: right;">
</p>
<h4 class="modal-title">Ayuda para la teoría</h4>
</div>
<div class="modal-body">
<p dir="ltr" style="text-align: left;"><br></p>
<p dir="ltr" style="text-align: center;"><iframe src="https://estudiomusica.com/wp-admin/admin-ajax.php?action=h5p_embed&i..." width="958" height="386" frameborder="0" allowfullscreen="allowfullscreen" title="Ayuda clasificación escalas mayores y menores - embed" style="width: 100%; height: 591px;"></iframe>
<script src="https://estudiomusica.com/wp-content/plugins/h5p/h5p-php-library/js/h5p-..." charset="UTF-8"></script>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
otacke
Thu, 06/17/2021 - 14:20
Permalink
Hi!This is commonly asked on
Hi!
This is commonly asked on the forum and there's a dedicated page describing that issue: https://h5p.org/manipulating-h5p-with-javascript. The Resize plugin may be a viable workaround.
Best,
Oliver
Best,
Oliver