Я пытаюсь реализовать простую кнопку воспроизведения для видео YouTube на странице WordPress.

<a id="play-video" href="#">Play Video</a><br />

<iframe id="video" width="420" height="315" src="//www.youtube.com/embed/9B7te184ZpQ?rel=0" frameborder="0" allowfullscreen></iframe>


<script type="text/javascript">
    jQuery('#play-video').on('click', function(ev) {
    jQuery("#video")[0].src += "&autoplay=1";
  ev.preventDefault();
 });
</script>

Оригинальный код ручки, который я нашел: здесь

Он прекрасно работает на Codepen и js fiddle, но не влияет на страницу WP.

Я упустил что-то фундаментальное?

Любая помощь приветствуется

0
juiceman 16 Дек 2015 в 23:43

3 ответа

Лучший ответ

Я нашел это по адресу: https://codex.wordpress.org/Using_Javascript
В разделе JavaScript в сообщениях :

Чтобы включить Javascript в сообщение, необходимо объединить вызов файл сценария с вызовом самого JavaScript.

<script type="text/javascript" src="/scripts/updatepage.js"></script>
<script type="text/javascript">
<!--
updatepage();
//--></script>

Мне нужно было поместить скрипт в файл .js и вызвать этот файл, а также сам скрипт.

Большое спасибо за помощь!

0
juiceman 17 Дек 2015 в 14:18
<script type="text/javascript">     

    document.body.addEventListener('load', function() {

        //jQuery should almost definitely be accessible in this scope

        var $ = jQuery;

        $('#play-video').on('click', function(ev) {
            $('#video')[0].src += "&autoplay=1";
            ev.preventDefault();
        });

    });

</script>

Это то, что я считаю хакерским способом добавления JavaScript в Wordpress.

Я бы рекомендовал всегда хранить ваши скрипты в отдельных файлах и использовать PHP-функцию Wordpress wp_enqueue_script, чтобы обеспечить порядок зависимостей скриптов.

0
flcoder 17 Дек 2015 в 02:03

Почти гарантировано, что вы не загружаете jQuery в этот проект, а добавляемый вами код опирается на jQuery.

В файле functions.php (в папке вашей темы) добавьте приведенный ниже код (убедитесь, что он находится между тегами открытия / закрытия php, а не до / после них. Открытый тег php выглядит как {{X0 }} и закрывающий тег ?>):

add_action('wp_enqueue_scripts', 'enqueue_my_jquery');

function enqueue_my_jquery() {
    wp_enqueue_script('jquery');
}

Вы можете найти другие ресурсы , которые показывают, как добавить jQuery непосредственно в файл header.php - этого не делать. это может (и будет) вызывать различные проблемы ,

0
random_user_name 16 Дек 2015 в 21:27