Embedding YouTube Videos is Not Working [fixed in 2.5.2]

Bug Reports
1

Hello, When you are adding a Youtube video, it creates the iframe, without source.
Thanks, Ryan Massey

2

You need to add the source (video URL) in the options panel on right hand side ?

3

I do place in the video URL, however when I export the video, it places an iframe, with no source (even with the video url in the box).

4

Looks like a bug to me.

I tried it myself and noticed that even in the app the SRC attribute is excluded from the HTML pane. I can use the ATTRIBUTES pane and added the SRC with the youtube video url and the video loads into the app and then is also working in the preview.

Saj

5

Thank you for reporting this!

There are two ways to embed a YouTube video:

  • Using the Video component.
  • Using the Responsive Embed component.

When you use the Video component you have to paste the URL of the YouTube video page. When you use the Responsive Embed, you need to paste the YouTube video embed URL, which you see when you click the Embed tab beneath the video on YouTube.

One omission on our part is that the Embed URL doesn't work when pasted in the Video component, which might be what you are attempting. We should fix this so that it works for people who go to the extra length of pasting the Embed URL.

6

You are correct Martin that is what I did. :)

I tried out the method you stated and that does work as intended. I would suppose some indication of what the expected URL is, would help.

Thanks for the help.

Saj

7

We fixed the issue - now the video component supports YouTube embed URLs as well as youtu.be short links. The fix will be part of the 2.5.2 release. Thanks for the feedback!

8

Great, I'm new to Bootstrap Studio, and the video component works. Is it also possible to make it responsive? Thanks,,,,,

9

Hi Nico,

There is a Responsive Embed component you can use instead of the Video component. Just follow what Martin said in the posts above.

Saj

10

Hi, I am using v2.5.4 and when using the responsive embed control within a block or a column I get "404 not found" ngnix message at design time and "Sorry, we can't find this resource." at runtime. I have tried the youtube share and embed links. Any ideas? the video link is https://www.youtube.com/watch?v=CPnkul8hx0w

11

It does not work for any youtube videos for me. Complete websites in the iFrame seem to work fine.

12

I did the following which worked.

  1. drag/drop .container on to body element
  2. drag/drop .row in .container
  3. drag/drop .column in .row
  4. drag/drop responsive embed component in .column
  5. entered the embed URL into Options pane (https://www.youtube.com/embed/CPnkul8hx0w)

It took a few seconds to load but it finally did. Maybe it's timing out for you and that's why you get an error. Try just going to the embed URL in your browser and see if it works, it does for me.

Saj

13

I'm having the same issue. When embedding a Vimeo video, I get a 404 error.

Edit: Same with YouTube.

Followed Saj's and Martin's instructions; neither worked.

14

@hothwampa, did you try the youtube video in my post. I just tried the directions in my post and the video loaded.

Saj