Responsive embed not working

Bug Reports
1

I was doing a project when I came across the following answer on the site.

image
image2560×1080 110 KB

The code generated by the BSS is the one below.

<div class="ratio ratio-16x9"><iframe src=""></iframe></div>

I got a temporary solution using custom code as below.

<iframe class="ratio ratio-16x9" src="https://www.youtube.com/embed/XHOmBV4js_E" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

This is the embed code generated by YouTube, I just removed the width and height and added the class=“ratio ratio-16x9”

I ask the BSS team to check the error and, if possible, correct it.

Another solution is to use the link generated by Youtube itself to embed the video.
Just copying the video link doesn’t work.
Example:

(https://youtu.be/XHOmBV4js_E)

This youtube generated link above does not work.

(https://www.youtube.com/embed/XHOmBV4js_E)

This other link generated above to embed the video already works.

(https://www.youtube.com/watch?v=XHOmBV4js_E)

The link above is what appears in the browser’s address bar, this also does not work.

In short, problem solved!

2

I had this issue as well a few weeks back and came to the same conclusions as you did for how to make it work. Seems it is something that should be fixed in BSS.

1 Like
3

When I embed YouTube vids using the Responsive Embed component, I click share on the video, then Embed, and then copy just the text highlighted in yellow (no quotes)…

image

This is what I put in the source URL field, and then I choose the aspect ratio that matches the video.

Never have any problems doing it this way. Some videos (usually older ones) fail to show a poster image or first frame in the BSS workspace, but they do appear when previewing the page in a browser.

1 Like
4

Thank you for reporting this! I don’t think it’s a bug, the responsive embed does what it should - embed the URL you give it without modification. And embedding youtube’s standard video page is blocked by youtube.

What is a bug is that we display a preview of the video in the app when we should instead show an error. We will fix it in our next update.