Как сделать чтобы каждая кнопка соответствовала своему видео с минимальным кодом?

Question

[Анастасия Козлова]

Есть страница с несколькими видео, которые находятся в определенных рамках. При нажатии на кнопку воспроизведения на первом видео, все видео начинают воспроизводиться. Аналогично, и при закрытии. На втором и последующих видео не происходит ничего при нажатии на кнопку воспроизведения.
Не хотелось бы для каждого видео писать свою кнопку воспроизведения и закрытия. Помогите, пожалуйста, решить проблему. Впервые сталкиваюсь с видео и не знаю как правильно с ними работать.

HTML:


JS:

Comments

[Troodi Larson]

Не по теме, IDE Atom?

[Анастасия Козлова]

Troodi Larson, Именно он

Answer 1

[Eugene Chefranov]

Используйте this при отработке кода.
И у вас как-то очень много кода для просто воспроизведения видео. Можно обойтись буквально 3-4 строками. И идет смесь нативного JS с jQuery. Если начали делать с использованием jQuery, то и продолжайте. Это значительно сократит код.

Что-то типа того

$('.video-block').on('click', function(e) {
    if (!$(this).hasClass('open')) { // если класса нет
        $(this).toggleClass('open');
        $(this + ' video').[0].play();
    } else { // если есть
        $(this).toggleClass('open');
        $(this + ' video').[0].pause();
    };
});

А на класс open повесить ваши анимации или че там у вас

Answer 2

[Сергей]

Это кусок одного из трёх видео? если да, то у вас наверное на каждом блоке стоит id="news_video", получается 3 одинаковых idи вjs вы работаете с id, поменяйте в html id блоков например наid="news_video2" , id="news_video2"и в js допишите новые id например $('#news_video, #news_video2, #news_video3')