Ниже html разметка вперемешку с Jinja:
{% for Videos in object_list %}
<!-- Button of Modal -->
<button class="btn btn-primary btn-md" data-toggle="modal" data-target="#videoOn{{Videos.id}}">
Запустить
</button>
</div>
<!-- Modal видео -->
<div class="modal fade" id="videoOn{{Videos.id}}" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body" style="padding: 0px;">
<div class='embed-responsive embed-responsive-16by9'>
<iframe class='embed-responsive-item' src="{{Videos.url}}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
{% endfor %}
А это подключаемый в конце JS:
(function(){
// Ссылка на кнопку открытия модального окна
var trigger = $('[data-toggle="modal"]');
// Ссылка на iframe с видеороликом
var iframe = $(trigger.data('target') + ' iframe');
// Строка с адресом видео на
var videoSrc = iframe.attr('src');
// При клике по кнопке добавляем к атрибуту src строку '?autoplay=1'
trigger.on('click', function() {
iframe.attr('src', videoSrc + '?autoplay=1');
});
// При скрытии модального окна
$(trigger.data('target')).on('hidden.bs.modal', function () {
iframe.attr('src', videoSrc);
});
})();
Я хочу, чтобы у меня была база данных с видео из ютуба, которую я визуализирую в виде кнопок, при нажатии на которые открывается модальное окно с автовоспроизведением, и при выходе из модального окна воспроизведение бы обрывалось. Однако, trigger.data('target') получает значение только последнего data-target из цикла вне зависимости от того на какую кнопку я жму. Итого: жму на первое видео, первое виде выводится, но не автовоспроизводится. Однако автовоспроизводится (звук идёт) второе видео, причём при закрытии модального окна, воспроизведение продолжается, будто бы я и не закрывал модальное окно. Но с последним (вторым) видео в таблице БД всё работает как надо.
Короче, я не сильно знаю js, поэтому буду благодарен за подробный ответ, сам, увы, не нашёл. Хочу знать "почему так" и "как исправить".
