Как оптимизировать этот код?

Question

[Антон]

Написал заглушку для видео:

$(function() {
	$('#main-video').on('click', function() {
		var url;
		url = $('#main-video').data('url');
		$('#main-video').after($('<iframe>', {
			src: url,
			"class": 'embed-responsive-item',
			id: 'main-video-iframe'
		}));
		$('#main-video').remove();
	});
});

$(function() {
	$('#main-video').ready(function() {
		var cover;
		cover = $('#main-video').data('cover');
		$('<div class="card card-inverse"><img class="card-img img-fluid" id="main-video-cover" src="' + cover + '" alt="trailer"><div class="card-img-overlay video-cover"> <i class="fa fa-play fa-5x"></i> </div></div>').appendTo('#main-video');
	});
});

<div class="embed-responsive embed-responsive-16by9">
	<div id="main-video" data-type="iframe" data-cover="path_to_cover" data-url="path_to_iframe"></div>
</div>

Все это работает. Нажимаю на cover, появляется iframe, удаляется исходный div.

Но проблема в том, что этот вариант не массовый. Если на странице более 5-ти iframe, то придется дублировать JS код. Как это исправить?

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

Answer 1

[Dark Hole]

Проблема в том, что код не массовый

function addHandlers(selector) {
...
}
$(function(){
  addHandler('#video1, #video2');
}

Можно еще в качестве плагина прицепить. Но, я думаю, тут нужен всего-лишь селектор классов.

Как оптимизировать этот код?

Отдельный вопрос, и сильно зависит от того, что вы хотите сделать. Но, как минимум, получать каждый раз одни и те же элементы - глупо.