Canvas Support

Video embed not responsive and wrong height

3 replies·opened Oct 31, 2022
H
henkvanmOct 31, 2022

Hi,

It seems like the standard Bootstrap youtube embed is not working with Canvas.

IF I use the standard code:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/c8_GkoN2LNM?rel=0&showinfo=0"></iframe>
</div>

I get a very small window.

What's more, if I check the preview on themeforest, I see the same issue on https://preview.themeforest.net/item/canvas-the-multipurpose-html5-template/full_screen_preview/9228123.

I also get the privacy warning there, but it doesn't matter if I change the preferences, videos won't show.

Version 5.8 works fine however

Thanks for your help,

Henk

S
SemiColonWebSTAFFOct 31, 2022

Hello,

Since you are checking the Media Embeds page in an iFrame, the browser blocks some of the functionalities like Window Refresh. Consider checking this directly: https://themes.semicolonweb.com/html/canvas/media-embeds.html . Turn on YouTube in the Privacy Settings and the YouTube iFrame Size should work fine.

Additionally, the Responsive Embeds are already enabled by default on all the iFrame Videos without the need of using Bootstrap Embed Utility. And the Codes you are using are incorrect as they have been changed in Bootstrap 5: https://getbootstrap.com/docs/5.2/helpers/ratio/#aspect-ratios . If you wish to use the Bootstrap Embed Utility instead, consider using the following code:

<div class="ratio ratio-16x9">
	<iframe class="no-fv" src="https://www.youtube-nocookie.com/embed/c8_GkoN2LNM?rel=0&showinfo=0"></iframe>
</div>

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

H
henkvanmOct 31, 2022

Thanks very much, wasn't aware that the bootstrap embed has changed, sorry about that.

Works fine now!

S
SemiColonWebSTAFFOct 31, 2022

Very Happy to Help! :) Glad the issue was resolved.

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard