Audio keeps playing after closing Modal Video

2 replies · opened Aug 23, 2016

JjkennerleyAug 23, 2016

We are using the <div class="modal fade video-modal-lg" id="myModal" tabindex="-1" role="dialog"...>
and when the user clicks the X instead of the close button, the audio continues to play.

JjkennerleyAug 23, 2016

Correction, the audio continues to play whether you click the X or Close.

SSemicolon WebSTAFFSep 3, 2016

Hello,

[sb_private_reply]We Really Apologize about the Delays in replying to your Support Query and Really Really Appreciate your Patience with us![/sb_private_reply]

This is Definitely Possible but is not included by default. You will need to add some Additional Codes for this to work properly. Please follow the steps below:

  1. Assign an ID to your iFrame Video. Example: #my-video . Now you iFrame Embedded Code will look like this:
  1. Now make sure that you add enablejsapi=1 to the end of the Embedded URL like in the code above.

  2. Now add the following JS Code at the bottom of the Page just after the js/functions.js JS File Linking:


	// Inject YouTube API script
	var tag = document.createElement('script');
	tag.src = "//www.youtube.com/player_api";
	var firstScriptTag = document.getElementsByTagName('script')[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

	var player;

	function onYouTubePlayerAPIReady() {
		// create the global player from the specific iframe (#my-video)
		player = new YT.Player('my-video', {
			events: {
			  // call this function when player is ready to use
			  'onReady': onPlayerReady
			}
		});
	}

	function onPlayerReady(event) {

		jQuery('#myModal').on('hidden.bs.modal', function (e) {
			player.stopVideo();
		});

	}

This will definitely work fine. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard