Воспроизвести видео на основе идентификатора из ссылки [js]

Question

У меня есть страница с 3 видео. Когда вы щелкаете видео, оно открывается в модальном режиме, а нажатие на кнопку закрывает видео. Круто.

Существует CSS для позиционирования видео и рисования там, где вы должны его закрыть. Затем есть файл Javascript, который читает все имена классов и создает щелчок для открытия и закрытия видео. В настоящее время мне нужен кусок классов с именами 001, 002, 003 ..., которые связаны с равным количеством файлов JavaScript, которые также были отредактированы с этими новыми именами и ссылками на видео. Поскольку все идентификаторы классов должны различаться в одном и том же файле HTML, мне также потребуется дополнительный код в таблице стилей, несмотря на то, что все они идентичны, за исключением имен.

На этой странице будет 30 или более видео.

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

Я ищу способ составить список видеороликов YouTube и прикрепить их к ссылкам, чтобы для их одновременного оформления требовался только один сценарий CSS, а для воспроизведения всех файлов необходим только один файл Javascript. из них так же.

Что мне нужно (я думаю), так это метод в JavaScript для захвата строки, по которой щелкнули, и помещения ее в кусок кода, а затем отображения связанного видео.

Так что, если я нажму на видео # 12, JS отобразит модал, содержащий youtube * com / embed / (видео # 12) /.

Другой пример - парень в проекционной комнате театра играет 8 разных видео, против 8 парней, которые показывают по одному 1.

Answer 1

Решено!Пожалуйста, смотрите Ссылка или кнопка устанавливает переменную, затем вызывает скрипт для получения результатов, и я вспоминаю, как здорово помогать всем:)

Answer 2

Вы можете прикрепить атрибут с ссылкой на видео к каждому элементу видео. Тогда вы можете присвоить всем элементам один и тот же класс и даже нацелить их на этот класс. Когда вы щелкаете по ним, ваш JS-код должен извлечь ссылку на видео из прикрепленного атрибута и отобразить ее в модели.

Так было бы что-то вроде:

<ul class="video-list">
    <li class="video-link" data-link="https://youtube.com/embed/[video#1]/.">The link title</li>
    <li class="video-link" data-link="https://youtube.com/embed/[video#2]/.">The link title</li>
    ...
</ul>

Затем добавьте прослушиватель событий для каждого элемента:

var videoLink = document.querySelector(".video-link");

videoLink.addEventListener('click', function() {
    var link = this.getAttribute("data-link");

    openModal(link); // A method that opens the modal.
});

Таким образом, вы можете добавлять стили в класс video-link по своему усмотрению, чтобы настроить таргетинг на все ссылки на видео без их идентификаторов или классов. Это также не ограничивает количество видео, поскольку все они имеют собственную ссылку, прикрепленную непосредственно к элементу.

Может быть, это приведет вас в правильном направлении?