Bootstrap 4 Stop YouTube Video From Playing When Modal Closes

Hi All

I have Googled this and added a pile of different code options from what I found and none of them worked.

I am using the latest version on Bootstrap 4 and some of the posts I found go back as far as 2014.

I have a standard button calling a standard modal with a YouTube video embedded:

<div style="padding-top:1em;"><button type="button" class="btn btn-danger w-100 text-uppercase" style="text-shadow: 2px 2px #000000;" data-toggle="modal" data-target="#TrenchCrossing">Original  Trench Crossing</button></div>

<!--  Modal -->
	<div class="modal fade" id="TrenchCrossing" tabindex="-1" role="dialog" aria-hidden="true">
	  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
		<div class="modal-content">
		  <div class="modal-body">
			<div class="embed-responsive embed-responsive-16by9">
			  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/ID?rel=0" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
		    </div>
		  </div>
		</div>
	  </div>
	</div>

When the modal opens all works well however when I close it the video keeps running in the background.

I have many videos in modals on this page and if you open and play another then 2 videos are playing and so on.

Can you please help me with some code to make sure when a modal closes all current videos stop playing.

Thanks for any help.

mrmbarnes

Add an ID attribute on your iframe so you can find and reference it:

<iframe id="ytplayer" ... >

Remove the src attribute before closing modal:

$('#my-modal').on('hide.bs.modal', () => {
  $('#ytplayer').attr('src', '');
});

Example:

Thanks… I have tried that and looked at the link and can’t get it working… the link has a pile of additional code in it which I don’t have… do you need all that other code?

It is a working example of Boostrap 4 & Youtube player.

What is the “pile of code” you are referring to?
Which exact part you are not able to achieve here?

In the post I wrote the exact you you need to make your YT player stop when closing the modal.

Hi

I added the code in your post however in the example there are 3 files that call in other files and there is different code that opens the modal before it is closed and not just the code you have supplied.

Unless I am missing a file that needs to be linked to my website like a version of jQuery?

mrmbarnes

Did you somehow miss my post?
image
This is the only thing you are missing here:

  • add ID attribute on iframe
  • add jQuery code which will fire on modal close event
  • the code simply removes src attribute from iframe which stops the Youtube player.

That is it.

The codesanbox is an example how it works, you can study it and implement only parts of it.

Hi

No, I didn’t miss your post… I added the ID, added the script and updated the #my-modal.

The site is still under development but the URL is https://www.lifttrax.com/index2.php

I have added it to the second button under the VIDEOS & PHOTOS link called NEW “PRODUCT” PROTOTYPE IN ACTION.

If you do a view source you can see the script added on line 201 and the iframe ID on line 213.

Am I missing something here?

Thanks for your help… it is really appreciated.

mrmbarnes

Ok, got it. Move the script:

$('#NewLiftTrax').on('hide.bs.modal', () => {
  $('#ytplayer').attr('src', '');
});

Remember that you will lose the src attribute value hardcoded in HTML. After you close modal and open it again it won’t be there anymore. So you can set it again on modal show event. Check my codesandbox example for that.

Inside document.ready function:
image

The DOM is not ready therefore the event did not bind.

Also you have an error on scroll event which triggers way to often (check your DEV console in Chrome):

Thanks once again… I think I have managed to work out the YouTube videos… I am not very good when it comes to this sort of scripting.

I have also had a look at the error you mentioned and I am not sure how to fix that… any idea?

mrmbarnes

If you click on the error stack:
image
You are trying to access something which is doesn’t exist in DOM.

If jQuery doesn’t find $(this.hash) then any method calls will throw.

To fix it you can just check the result of jQuery search is not empty:

const sectionEl = $(this.hash);
if (sectionEl.length) {
  // make the calculations of scroll offset
}

Yes, you might consider using the actual YT iframe API instead so that you can do something like

window.onYouTubeIframeAPIReady = () => {
  const player = new YT.Player('ytplayer')

  $('#my-modal').on('hide.bs.modal', () => {
    player.pauseVideo()
  })
}

This way you also won’t load the video iframe twice when opening the modal again.

1 Like

Thanks for that… it fixed it and I also have the YouTube stuff working… thanks once again for your help.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.