Embedded content breaks theme design

  • antoniomc76

    (@antoniomc76)


    7 years, 4 months ago

    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)
  • epicdevspace

    (@epicdevspace)

    7 years, 4 months ago

    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 7 years, 4 months ago by epicdevspace.
    Thread Starter antoniomc76

    (@antoniomc76)

    7 years, 4 months ago

    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 7 years, 4 months ago by antoniomc76.
    epicdevspace

    (@epicdevspace)

    7 years, 4 months ago

    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?

    Thread Starter antoniomc76

    (@antoniomc76)

    7 years, 4 months ago

    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.

    epicdevspace

    (@epicdevspace)

    7 years, 4 months ago

    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!

    Thread Starter antoniomc76

    (@antoniomc76)

    7 years, 4 months ago

    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.