Responsive embed component returning error with YouTube videos

Bug Reports
1

@martin @gabby

I suspect something is wrong with either Bootstrap Studio’s Responsive Embed component when it’s used to embed YouTube videos, or YouTube has simply stopped playing nice with the latest version of Bootstrap’s .embed-responsive class.

Earlier today I updated a client’s website that had numerous embedded YouTube videos on it. They were all embedded using the Responsive Embed component, and the videos were working before I published the site. The updates I made were completely unrelated to the videos. I did not alter any of the embed codes or touch any of the Responsive Embed components in any way. Now, none of the videos will connect to YouTube.

So I did an experiment. This is another site I have that has a video (about mid-way down the page) embedded with the Responsive Embed component. (It was last published a few months ago)…

As you can see, the video is clearly working.

I opened the site in Bootstrap Studio without making ANY changes, exported it to a temporary folder, and uploaded it here…

Now, as you can see, the video no longer connects. If I embed videos using the the custom code component and YouTube’s iframe embed code, they work fine. Same thing if I use the HTML 5 video component. Only the Responsive Embed component is not working.

(PS - to ensure it wasn’t my computer, browser or internet service, I checked this on my phone using my mobile data, and the videos do not play.)

2

Which URL do you have in the responsive embed component

this works
https://www.youtube.com/watch?v=LPnxCc32XW8
this works as well
https://www.youtube.com/?v=K6CWjkDgQnE

this not
https://www.youtube.com/embed/LPnxCc32XW8

1 Like
3

@kuligaposten
I have the bottom URL (this one https://www.youtube.com/embed/LPnxCc32XW8) in both the original website, and the second one I uploaded as a test…

Why would that URL work in the Responsive Embed component when it was uploaded a couple of months ago, and not now? Maybe YouTube changed something?

The bottom URL is the one YouTube supplies you with when you click on the Share > Embed link. I’ve got numerous sites with dozens of videos embedded using the Responsive Embed component, and they all use the URL with the /embed format.

This makes no sense.

4

The Responsive Embed Component convert the YouTube URL ?v=LPnxCc32XW8
to embed/LPnxCc32XW8
If you enter https://www.youtube.com/embed/LPnxCc32XW8 BSS
can’t find ?v=LPnxCc32XW8 in the url and will give you an URL https://www.youtube.com/embed/undefined
It has been like that for a while, now the Responsive embed works the same as the video component.
YouTube hasn’t change anything

5

Okay, this is interesting… when I export the page from BSS, the URL in the Responsive Embed component is being changed in the HTML from this…

image

to this…

image
image719×54 2.76 KB

The program is changing the URL.

@martin @gabby

6

Thank you for the report! This is an unfortunate bug with YouTube embed URLS that will be fixed in our next update. For now the watch page URL is the one to use. Non-youtube URLs are not affected.

3 Likes
7

Thanks for clarifying this. Hopefully the next update comes out soon. In the interim, I’ll refrain from any further exporting or updating of pages with embedded YouTube videos.

8

Ok, changing https://www.youtube.com/embed/ to YouTube works when the video is embbeded. But I have a pulldown menu and a js code to change the video like:

$(“#N000”).click(function() {
$(‘#VideoTutorial’).attr(“src”, “YouTube”);
});

In this case it is still not working. Any idea how I can fix?

Thanks

9

@peter-kompier
you can do it like this

11

I almost did it…
But the src is not changing in the JS code and I don’t know why (I’m really weak with JS).
Here is an example (It is in BS4):
https://procheff.com.br/Example.bsdesign

12

@peter-kompier

I made a component called YouTube container.
It is in the online library

1 Like
13

Hi, thanks for the component!
I liked the idea but I think in small devices, if you have a long list of videos and choose one, you have to go to top to watch. The modal window opening I think will do better.
I will try to modify the js.