# Responsive embed component returning error with YouTube videos

**URL:** <https://forum.bootstrapstudio.io/t/responsive-embed-component-returning-error-with-youtube-videos/9549>\
**Category:** Bug Reports\
**Created:** [October 23, 2022, 5:32am UTC](https://forum.bootstrapstudio.io/t/responsive-embed-component-returning-error-with-youtube-videos/9549 "2022-10-23T05:32:35Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![printninja](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/printninja/32/481_2.png) [@printninja](https://forum.bootstrapstudio.io/u/printninja)\
**Post date:** [October 23, 2022, 5:32am UTC](https://forum.bootstrapstudio.io/t/responsive-embed-component-returning-error-with-youtube-videos/9549/1 "2022-10-23T05:32:35Z")

</div>

@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)…

> **[Counseling And Therapy Services In West Babylon And Wantagh](https://heartandsoulcenter.com)**
>
> Verified by Psychology Today. Don't Suffer Any Longer. Long Island’s Top Therapy/Counseling Center In West Babylon & Wantagh. Individuals, Groups & Couples. Depression, Anxiety, Stress, Phobias, ADD & ADHD, Autism Issues, Child Abuse,...

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…

> **[Counseling And Therapy Services In West Babylon And Wantagh](https://thelightwavegroup.com/vidtest/)**
>
> Verified by Psychology Today. Don't Suffer Any Longer. Long Island’s Top Therapy/Counseling Center In West Babylon & Wantagh. Individuals, Groups & Couples. Depression, Anxiety, Stress, Phobias, ADD & ADHD, Autism Issues, Child Abuse,...

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.)

---

<div class="post-metadata">

**Author:** ![kuligaposten](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/kuligaposten/32/1190_2.png) [@kuligaposten](https://forum.bootstrapstudio.io/u/kuligaposten)\
**Post date:** [October 23, 2022, 9:38am UTC](https://forum.bootstrapstudio.io/t/responsive-embed-component-returning-error-with-youtube-videos/9549/2 "2022-10-23T09:38:13Z")

</div>

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`

---

<div class="post-metadata">

**Author:** ![printninja](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/printninja/32/481_2.png) [@printninja](https://forum.bootstrapstudio.io/u/printninja)\
**Post date:** [October 23, 2022, 4:17pm UTC](https://forum.bootstrapstudio.io/t/responsive-embed-component-returning-error-with-youtube-videos/9549/3 "2022-10-23T16:17:52Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![kuligaposten](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/kuligaposten/32/1190_2.png) [@kuligaposten](https://forum.bootstrapstudio.io/u/kuligaposten)\
**Post date:** [October 23, 2022, 4:44pm UTC](https://forum.bootstrapstudio.io/t/responsive-embed-component-returning-error-with-youtube-videos/9549/4 "2022-10-23T16:44:01Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![printninja](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/printninja/32/481_2.png) [@printninja](https://forum.bootstrapstudio.io/u/printninja)\
**Post date:** [October 23, 2022, 4:57pm UTC](https://forum.bootstrapstudio.io/t/responsive-embed-component-returning-error-with-youtube-videos/9549/5 "2022-10-23T16:57:32Z")

</div>

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](https://forum.bootstrapstudio.io/uploads/default/original/2X/7/7aa90acc529a74c8f5ca48faa8ad9aff10ca7b6c.png)

to this…

 ![image](https://forum.bootstrapstudio.io/uploads/default/original/2X/3/31f3d5a4560ade43ac62974a41ab10344333ef0c.png)

The program is changing the URL.

@martin@gabby

---

<div class="post-metadata">

**Author:** ![martin](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/martin/32/3_2.png) [@martin](https://forum.bootstrapstudio.io/u/martin)\
**Post date:** [October 24, 2022, 10:02am UTC](https://forum.bootstrapstudio.io/t/responsive-embed-component-returning-error-with-youtube-videos/9549/6 "2022-10-24T10:02:19Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![printninja](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/printninja/32/481_2.png) [@printninja](https://forum.bootstrapstudio.io/u/printninja)\
**Post date:** [October 24, 2022, 4:40pm UTC](https://forum.bootstrapstudio.io/t/responsive-embed-component-returning-error-with-youtube-videos/9549/7 "2022-10-24T16:40:58Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![peter-kompier](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/p/ac8455/32.png) [@peter-kompier](https://forum.bootstrapstudio.io/u/peter-kompier)\
**Post date:** [October 24, 2022, 6:46pm UTC](https://forum.bootstrapstudio.io/t/responsive-embed-component-returning-error-with-youtube-videos/9549/8 "2022-10-24T18:46:00Z")

</div>

> [@kuligaposten](#):
>
> [YouTube](https://www.youtube.com/?v=)

Ok, changing `https://www.youtube.com/embed/` to [YouTube](https://www.youtube.com/?v=) 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](https://www.youtube.com/?v=JoJia59nRjg)”);  
});

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

Thanks

---

<div class="post-metadata">

**Author:** ![kuligaposten](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/kuligaposten/32/1190_2.png) [@kuligaposten](https://forum.bootstrapstudio.io/u/kuligaposten)\
**Post date:** [October 24, 2022, 7:31pm UTC](https://forum.bootstrapstudio.io/t/responsive-embed-component-returning-error-with-youtube-videos/9549/9 "2022-10-24T19:31:05Z")

</div>

@peter-kompier  
you can do it like this

> **[YouTube Example](https://youtube-example.bss.design/)**
>
> Show YouTube videos in a modal from the navbar

---

<div class="post-metadata">

**Author:** ![peter-kompier](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/p/ac8455/32.png) [@peter-kompier](https://forum.bootstrapstudio.io/u/peter-kompier)\
**Post date:** [October 25, 2022, 11:37am UTC](https://forum.bootstrapstudio.io/t/responsive-embed-component-returning-error-with-youtube-videos/9549/11 "2022-10-25T11:37:04Z")

</div>

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](https://procheff.com.br/Example.bsdesign)

---

<div class="post-metadata">

**Author:** ![kuligaposten](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/kuligaposten/32/1190_2.png) [@kuligaposten](https://forum.bootstrapstudio.io/u/kuligaposten)\
**Post date:** [October 25, 2022, 6:10pm UTC](https://forum.bootstrapstudio.io/t/responsive-embed-component-returning-error-with-youtube-videos/9549/12 "2022-10-25T18:10:29Z")

</div>

@peter-kompier

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

---

<div class="post-metadata">

**Author:** ![peter-kompier](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/p/ac8455/32.png) [@peter-kompier](https://forum.bootstrapstudio.io/u/peter-kompier)\
**Post date:** [October 25, 2022, 7:12pm UTC](https://forum.bootstrapstudio.io/t/responsive-embed-component-returning-error-with-youtube-videos/9549/13 "2022-10-25T19:12:54Z")

</div>

> [@kuligaposten](#):
>
> YouTube container

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.
