How to Hide Embed Code?

Design help Layout & Design
1

Hello!

I’ve searched through other posts, and there doesn’t seem to be a way around to hiding iFrame Embed code at different views (Mobile, Desktop, etc.)

Below is a sample snippet of code, minus the opening an closing carrots, generated from BaseCamp (an audio hosting Platform)

I’ve tried all the options within the Designer, but no luck

Any tips, tricks, final conclusions?

TY

iframe style=“border: 0; width: 350px; height: 350px;” src=“https://bandcamp.com/EmbeddedPlayer/track=1305870018/size=large/bgcol=ffffff/linkcol=0687f5/minimal=true/transparent=true/” seamless>Aero Borealis by Slow</iframe

2

hi @Gravy there are several ways. You can use iFrame attribute hidden or use class with display : none both with use of media queries.

All is well explained online in written or video form.

1 Like
3

TY Stan…I’ll lok into that for sure!!

4

In the Webflow designer, you’d assign a class to your embed element, and then at e.g. mobile-landscape you set its display style to none. The media queries are hidden from you in the breakpoint system.

Or, conversely, you could hide it at desktop, and then choose a smaller ( e.g. tablet ) and/or larger ( e.g. 1280 ) breakpoint to make it display: block at.

All styles are defined at the desktop breakpoint and the rules propagate outwards. You’ll need to dig into Webflow U if this isn’t familiar to you yet, it’s very fundamental to Webflow design.

1 Like
6

That does not work with an iFrame Embed file.

Very familiar with this feature in the Designer. Works just fine for all other asset types with a class.

If you asign “none” at one view, like mobile, it’s now not there in all other views.

It’s either always there or never there.

Try a quick test, using the code source I shared and you’ll see.

TY

7

You can share your published site link with details on where to find the IFRAME in the page if you like. If you’re having troubles with display: none directly on the Embed, you can wrap the embed in an additional div and hide that instead.

There’s nothing weird about your IFRAME and it could not override your parent document HTML. Script-generated popups might be possible(?) from a hidden IFRAME.

  1. Class on the embed element directly
  2. Display one styling
  3. Your iframe no longer shows

image
image1287×717 26.4 KB

2 Likes
8

I do not know what are you doing @Gravy but it took me 1min to do that

1 Like
9

Hmmm?

So you can turn on and off the same Embed file, via none, for mobile and other displays?

Would love to see

Not sure what I’m doing either :slight_smile:

TY for the support, patience

10

Sorry…just saw the video, and will watch it closer

Not sure what I’m doing either?

11

this may help if you have missed WFU @Gravy