Support » Fixing WordPress » Embedded content breaks theme design

  • Hi everybody,
    I’ve found that all my embedded content is displayed too wide, more than the content area width, as you can see here: http://instantes.net/2013/12/mis-canciones-favoritas-del-2013/

    It happens with Youtube videos, Spotify and Soundcloud iframes. They all are always at least 800px wide. I don’t know where this length comes from but it overrides the default width and height.

    This issue is related to the Fukasawa theme since other themes seem to work properly. I think it has to do with how the responsive design has been implemented, but I can’t find the way to fix the wrong CSS.

    Thanks in advance.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Hi antoniomc76

    Add an !important declaration when specifying the width of the iframe.

    For example:

    
    <iframe src="https://embed.spotify.com/?uri=spotify:user:antoniomc:playlist:2wesDZVb0EIHwAg37JdFyl" data-origwidth="300" data-origheight="380" style="width: 531px !important; height: 672.6px;" frameborder="0"></iframe>
    

    Let me know if this works for you.

    All the best!

    • This reply was modified 2 years, 7 months ago by  epicdevspace.

    Hi epicdevspace
    Thanks for your answer and your interest. Unfortunately, I don’t set the parameters with in iframe tag, I mean, I just paste the url from a youtube video, or the Spotify/sopundcloud link (i.e. https://open.spotify.com/user/antoniomc/playlist/2wesDZVb0EIHwAg37JdFyl) into the WordPress ‘add new post’ section. Then somehow, WP inserts the iframe (and its parameters) into the resulting post.

    At some point, A new width and height are added (marked in red), overriding the original ones (in green), as seen in the Firefox DOM inspector: [full image here]

    inspector code

    But, if you take a look at the source code, only the original width and height appear: [Full image here]

    Source coce

    That’s weird!

    Thanks again

    • This reply was modified 2 years, 7 months ago by  antoniomc76.

    Hi

    I tried to replicate the issue on my side but couldn’t.

    See This Post

    I pasted the link in the post’s body however no iframe was auto generated. I then added the embed via Add Media and everything worked just fine.

    I suspect that there’s a plugin at play here. If you use Add Media (insert from url) do you still have the same result?

    Hi again,
    Well, in fact, the issue is replicated on your test site: The Spotify widget (which is an iframe) is as wide as the content container (620px in this case) while it should be 300px. The same happens with the height: 785px instead of 380px.

    I’m not using any plugin to add media. In my opinion, this is caused by a wrong implementation of the responsive design.

    Thanks a lot for your interest.

    Hi

    I placed a div around the embed and the width and height displays as anticipated.

    My advice is to either code the iframe or make use of WP’s Add Media functionality and create a few CSS classes to make life easier.

    Btw. I assumed your issue was the embed was displaying too wide (running off screen), I could not replicate this issue.

    All the best!

    Thanks for the workaround. I’ll try it.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Embedded content breaks theme design’ is closed to new replies.