jQuery Modal Video Plugin not working in last grav version

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

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

@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

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