iframe

Highlighted
Tourist
4 0 0

can someone help me with this iframe as it is not working: 

 

<iframe allow="camera; microphone; fullscreen; display-capture" src="https://meet.jit.si/908d7uyrhj9-opening-coffee-shop" style="height: 100%; width: 100%;border: 0px;"></iframe>

 

its on this page: https://canadianbaristainstitute.com/pages/how-to-open-a-coffee-shop-webinar

0 Likes
Highlighted
Shopify Partner
2471 129 406

If you mean the height problem cutting off most of the iframe content see https://stackoverflow.com/questions/5272519/how-do-you-give-iframe-100-height/5272579.

 

Options:

  • set the height of the containing element to be large enough to show all the iframe. Prefered approach for all screen sizes.
  • or set a defined height on the iframe besides 100%. suitable for large screens.
  • use a style attribute on the iframe for 100% height in combintation with absolute positioning( the parent element needs to be set to postion:relative;)

With 100% an iframe will not resize the page, it will only expand to take up as much space as it's given.

Keep in mind setting a specific height may cause problems on smaller screens.

 

<iframe allow="camera; microphone; fullscreen; display-capture" src="https://meet.jit.si/908d7uyrhj9-opening-coffee-shop" style="height: 720px; width: 100%;border: 0px;"></iframe>

 

 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
Highlighted
Tourist
4 0 0

how do i change the containing element ? 

0 Likes
Highlighted
Shopify Partner
2471 129 406

You will have to find where in the theme which template that iframe code your placing gets used.

The files and locations varies wildly by theme and sections unfortunately, that's why I provided the example with a defined size as a bare minimum.

I tried looking again to see if there was some CSS that could be applied but it's set to require accounts now, goodluck.

 

If you want to hire me to dig around for the right code you can email me at paull.newton+shopifyforums@gmail.com

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes