Bootstrap 3 and Youtube in Modal

Question

I\'m trying to use the Modal feature from Bootstrap 3 to show my Youtube video. It works, but I can\'t click on any buttons in the Youtube video.

Any help on this?<

Answer 1

For Bootstrap 4, which handles videos, images and pages...

http://jsfiddle.net/c4j5pzua/

$('a[data-modal]').on('click',function(){
	var $page = $(this).data('page');
	var $image = $(this).data('image');
	var $video = $(this).data('video');
	var $title = $(this).data('title');
	var $size = $(this).data('size');
	$('#quickview .modal-title').text($title);
	if ($size) { $('#quickview .modal-dialog').addClass('modal-'+$size); }
	if ($image) {
		$('#quickview .modal-body').html('
');
	} else if ($video) {
		$('#quickview .modal-body').html('
');
	}
	if ($page) {
		$('#quickview .modal-body').load($page,function(){
			$('#quickview').modal({show:true});
		});
	} else {
		$('#quickview').modal({show:true});
	}
	$('#quickview').on('hidden.bs.modal', function(){
		$('#quickview .modal-title').text('');
		$('#quickview .modal-body').html('');
		if ($size) { $('#quickview .modal-dialog').removeClass('modal-'+$size); }
	});
});

Bootstrap 4 Modal YouTube Videos, Images & Pages

Video

Image

Page *

* Clicking this will break it, but it'll work using a local page!







Title
×