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&amp;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's picture

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