iFrame embedding Not Responsive on Mobile

• 

  lunchepreneurs · Member · Feb 24, 2016 at 1:57 pm

  • Copy link
  • Add topic to favorites

  Hey guys, I having issues with an iframe. I embedded a soundbite from Anchor FM (similar to sound cloud looking one) and it looks wrong on a mobile device.

  Here’s my iframe HTML:
  <div><iframe src=”https://anchor.fm/embed/9a8846″ width=”540px” height=”210px” frameborder=”0″ scrolling=”no”></iframe></div>

  I added this into the CSS Style sheet and nothing happened:
  .video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  }

  .video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 35px;
  height: 0;
  overflow: hidden;
  }

  Help!

  The blog I need help with is: (visible only to logged in users)

• 

  crazywickedawesome · Member · Feb 24, 2016 at 4:19 pm

  • Copy link

  Hi! I’ve checked out your site, the embedded soundbite looks like it scales properly when view on my smartphone. Could you be more specific as to how it looks wrong?

• 

  crazywickedawesome · Member · Feb 24, 2016 at 4:20 pm

  • Copy link

  I apologize, that should read “when viewed on my smartphone.”

• 

  thesacredpath · Member · Feb 24, 2016 at 5:59 pm

  • Copy link

  Hi @lunchepreneurs, it looks like you are using WordPress but you are not hosted here at WordPress.com. For self-hosted WordPress sites such as yours, I would suggest asking for help from the theme author directly or ask in the volunteer-based WordPress.org Themes and Templates forum.

  For general questions on self-hosted WordPress.org installations, visit http://wordpress.org/support/.

  The differences between WordPress.com and WordPress.org.

  I checked your site also and had no problem accessing your player on my iPhone.