Youtube playing wrong video

HTML & CSS
1

I have a web page with a list of team members each with a photo, a description and a link to a modal to display an embedded YouTube video from the individual team member.
When I click the modal YouTube shows a video which is embeded on the homepage of the site, not the video for the individual team member.
This is the code I am using.

<div class="modal-body">
                  <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" width="560" height="315" src="//www.youtube.com/embed/6-B06a0JC30?rel=0;&autoplay=1;&mute=1;&controls=0;&showinfo=0" allowfullscreen></iframe>
                 </div>
 </div>
2

That code will always play the same video. I don’t see where you are telling it play a different one for different team members.

1 Like
3

Perhaps you should be updating the source of the iframe with js when you click to open the modal and pass the relevant url.

Otherwise how would you expect this to work unless you have a separate modal for every team member which would be a bit over the top.

We probably need to see what you have so far but it looks as though this is a scripting question.

1 Like
4

Sorry, I probably haven’t explained very well.
This is only the code snippet for one of the team members.
The code for the rest of the members is the same except it has a different src in the iframe. Each src code is for a different video.

5

This is the page concerned

6

You have all the modals set up with the same ID so only the first one will be found.

You have this structure:


<!-- Button HTML (to Trigger Modal) -->
<a href="#myModal" class="btn btn-primary btn-lg whitebord" data-backdrop="false" data-toggle="modal">Meet Natalie</a>
<!-- Modal HTML -->
<div id="myModal" class="modal fade in">

Now if I remember correctly bootstrap will use the href to toggle the modal so on subsequent modals ypu need to increment the id and update the href.

e.g.I added the number 2 on the end in two places here:

<!-- Button HTML (to Trigger Modal) -->
<a href="#myModal2"   ... etc..... 
<!-- Modal HTML -->
<div id="myModal2" class="modal fade in">

Do that for all the team members and increase the href and the id in unison.

Hopefully that’s what bootstrap wants but if not then we’ll look again :slight_smile:

7

That worked perfectly, thank you.

1 Like
8

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