Problems with youtube videos and the solution I found

Maybe it’s not a bug, but a setting that I didn’t find, but anyway I managed to get around the problem and I’m here to share it with friends.

Maybe it will help someone, or even support, to apply this shape to the video component.

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/vwhN6Yv3Grc" title="YouTube video" allowfullscreen></iframe>
</div>
2 Likes

It is already a component, search for “Responsive Embed”

1 Like

Thanks, I hadn’t seen that!

1 Like

Thanks much for your post @gilmar ! I’ve been wracking my brain trying to figure out what to do with this as I couldn’t get either of them to work right. The Embed looked to fit correctly, but the video wouldn’t show up for some reason. I checked another site I used it on and it worked there so I’m stumped on that yet.

But … add the Div and giving it the ratio settings fixed up the video component perfectly!

+1 for hoping the devs correct that so it works right as well. :slight_smile:

1 Like

Sometimes when I link to YouTube videos using the responsive embed component, I will not get a preview of the video inside BSS, but it still works properly in preview or when published. I’m not sure why this happens on select videos.

I have a website here with 16 videos on the page and all but the last 5 show previews in BSS.

Yeah, but I’m not sure it’s working at all for this site since it doesn’t show up in the browser preview or Polypane at all. Just the space is allocated correctly, but nothing in it. Not sure what the deal is there, it works, I’ve watched it, it’s embeded on the old BS3 site that I’m converting to BS5 now. It works if I put it into the Video component, just the sizing was messed up (fixed now thanks much!), but when I add it to the Responsive Embed, … nothing.

I’m sure it’s something I have conflicting somewhere, since I know it works in BS5 as I’ve used it on a few other sites successfully, but no clue lol. It’s ok though, I got the Video Component working now :slight_smile: