Оберните Vimeo URL с помощью Player, используя JS / Regex - PullRequest
Новая
       11

Оберните Vimeo URL с помощью Player, используя JS / Regex

0 голосов
/ 07 ноября 2019

Я начал разработку сайта по адресу: http://joshrodg.com/isbellfilms2/

У меня есть плагин WordPress, который генерирует таблицу цен. Мне нравится, как плагин работает и функционирует для пользователя, но нужно настроить одну вещь.

В плагине есть место для описания, которого у меня нет, но я бы хотел добавить видеовместо этого.

Я понимаю, что это веб-сайт WordPress, но проблема, с которой я сталкиваюсь, связана с моим сценарием.

Я пытаюсь найти URL-адрес Vimeo и передать его в проигрыватель. .

Я нашел кусок кода, немного его подправил, но он не совсем работает.

Используемый мной JS выглядит следующим образом: 

<script type="text/javascript">
    $(document).ready(function() {
        var classSelector = document.querySelectorAll('.rpt_description');
        var vimeoRegEx = /(?:http?s?:\/\/)?(?:www\.)?(?:vimeo\.com)\/?(.+)/g;
        var vimeoEmbed = '<div class="embed-container"><iframe src="https://player.vimeo.com/video/$1" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>';

        array.prototype.forEach.call(classSelector, function(el) {
            if (vimeoRegEx.test(el.innerHTML)) {
                el.innerHTML = el.innerHTML.replace(vimeoRegEx, vimeoEmbed);
            }
        });
    });
</script>

Кодплагин выводит URL-адреса Vimeo: 

<div class="rpt_plan rpt_plan_ori rpt_plan_0  ">
    <div style="text-align: center; height: 15px;" class="rpt_title rpt_title_0">The Family Yearbook Film</div>
    <div class="rpt_head rpt_head_0" style="height: 250px;">
        <div class="rpt_recurrence rpt_recurrence_0">(Yearly)</div>
        <div class="rpt_price rpt_price_0"><span class="rpt_currency"></span>$350</div>
        <div style="color:#3ac893;" class="rpt_subtitle rpt_subtitle_0">Stay up to date with your changing family for an entire year.</div>
        <div class="rpt_description rpt_description_0">https://www.vimeo.com/320417542</div>
        <div style="clear:both;"></div>
    </div>
    <div class="rpt_features rpt_features_0" style="height: 183px;">
        <div style="color:black;" class="rpt_feature rpt_feature_0-0">A 3-5 min film every 3 months (4 total films)</div>
        <div style="color:black;" class="rpt_feature rpt_feature_0-1">Plus one Keepsake film</div>
        <div style="color:black;" class="rpt_feature rpt_feature_0-2">30% off discount on any additional films you purchase that year.</div>
        <div style="color:black;" class="rpt_feature rpt_feature_0-3">Upload 30-450 clips</div>
    </div>
    <div style="clear:both;"></div>
    <a target="_self" href="https://isbellfamilyfilms.com/#order-form" style="background:#3ac893" class="rpt_foot rpt_foot_0">Add to Cart</a>
</div>

Регулярное выражение находит URL-адрес, а JS берет URL-адрес и передает его проигрывателю, что-то не совсем правильно. Я удостоверился, что этот JS выполняется перед плагином, но я попробовал его обоими способами.

Я уверен, что упускаю что-то простое, любая помощь приветствуется.

Спасибо,Джош

1 Ответ

0 голосов
/ 07 ноября 2019

Полностью забыл ссылку на jQuery, так что стыдно! Просто нужно было добавить эту строку перед моим JS-кодом: 

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Я также должен был использовать Array

Надеюсь, это кому-нибудь поможет! Джош

...