jQuery Modal Video Plugin not working in last grav version

Support Plugins
1

Hi.

I use jQuery Modal Video Plugin in the site Hukawati to show some video in modal popup.
So far I have not had problems, but since the last Grav update in the modal window the video appears as Not available, while if I copy the url of the video and show it in a separate window, it does work.
This is the code I use for the modular page that the videos load:

{% block stylesheets %}
    {% do assets.addCss('theme://css/modal-video.min.css') %}
{% endblock %}
{% block javascripts %}
    {% do assets.addJs('theme://js/modal-video.min.js', {group:'bottom'}) %}
     {% do assets.addJs('theme://js/jquery-modal-video.min.js', {group:'bottom'}) %}
    
{% endblock %}
{% block assets deferred %}
    {{ assets.css()|raw }}
    {{ assets.js()|raw }}
{% endblock %}
<div class="modular-row video-list {{ page.header.class }}" {% if page.header.bg_color %}style="background-color:{{page.header.bg_color}};"{% endif %}>
    {{ content|raw }}  
    <div class="videos">
        {% for video in page.header.videos %}
        <div class="video">
            {% if video.title %}<p><strong>{{video.title|raw}}</strong></p>{% endif %}
            {% if video.description %}<p>{{video.description|raw}}</p>{% endif %}
            <a href="#" class="js-modal-video" data-video-id="{{ video.id }}">
                <div class="video-thumbnail">
                    <img src="https://i.ytimg.com/vi/{{ video.id|e }}/hqdefault.jpg" alt="{{ video.title|e }}" /> 
                </div>
            </a>
        </div>
        {% endfor %}
    </div>
</div>
{% block bottom %}
    {{ assets.js('bottom')|raw }}
    <script type="text/javascript">
        $(".js-modal-video").modalVideo({channel:'youtube'});
    </script>
{% endblock %}

This code has been working perfectly so far.
What happened in the latest Grav update to prevent this from working?

Thanks in advance

2

It’s some combination of embed URL params. Maybe YT changed something on their end.
This works - YouTube
This doesn’t - YouTube

3

@pmoreno, You’re not the first…

Maybe this issue logged on the github page for jQuery Modal Video Plugin might give you some hints: All modals for youtube displaying “This video is unavailable.” #73

4

Hello there.
Sure enough, I have modified the script that calls the modal dialog, removing all references to null (https://github.com/appleple/modal-video/issues/73#issuecomment-941040075), and it is working fine.
The script looks as follows:

<script type="text/javascript">
        $(".js-video-button").modalVideo({
            channel: 'youtube',
            youtube: {
                autoplay: 1,
                cc_load_policy: 1,
                controls: 1,
                disablekb: 0,
                enablejsapi: 0,
                fs: 1,
                iv_load_policy: 1,
                loop: 0,
                rel: 0,
                showinfo: 1,
                start: 0,
                wmode: 'transparent',
                theme: 'dark'}
            });
    </script>

Thanks for your cooperation.

1 Like