How to show a positioned iFrame properly?

  • Trap Beats & Instrumentals

    (@surcebeats)


    10 years, 7 months ago

    Hi, first of all thanks in advance. Since 2010 my main webpage was only a <meta> redirection to a SoundClick music Profile. I am a music producer, so I setted up my main music webpage with WordPress looking forward to the SEO, plugins and the exposure of having a blog to post all the works I Have been featured and who I am. I am really happy with the result that I have with WordPress and works fine for me but my business is located at SoundClick at all.

    THe problem that I have is with my SoundClick profile. SoundClick is a music community with a charts based on pageviews and plays at your page, so if you have a lot of views and plays you will rank up in the charts and obviously you will make more money. In these 3 years of being at SoundClick as my main webpage (2010 to 2013 ) I haved a lot of clients and having more than 2 millions of plays and guess like 300k pageviews.

    I was thinking into embed the SWF widget player that provide SoundClick into my own WordPress homepage but that not worked for me because for security / chart boosting reasons these plays did not count like if you have them in your own SoundClick profile so I think that my solution is an iFrame and yes! Worked fine! Every pageview to my wordpress homepage count as a pageview at SoundClick and every songplay is counted too as well so I did not lose any ranking / money.

    So now the problem is that:

    I have stretched and make a little positioning into the iFrame content in order to use it as a MP3 Player widget with a plays and pageviews counter and… Worked really fine in HTML! But for any weird reason when I put the code snippet of the modified iFrame into WordPress it is not showed in the same way, I dont know why…

    Here is the code snippet, you can put it into an *.html file and see how it works:

    Code:
    <center><div style="width: 641px; height: 223px; overflow: hidden;"><iframe style="width: 1280; height: 1080px; margin-top: -539px; margin-left: -188px;" src="http://www.soundclick.com/surcebeats" width="1280" height="1080" scrolling="no" frameborder="0"></iframe></div></center>

    Live HTML:
    https://dl.dropboxusercontent.com/u/17135891/PositionedIframe.html

    And here is how is showed in my main WordPress home with the same code snippet:

    https://dl.dropboxusercontent.com/u/17135891/WordPress%20HTML%20Bug.png

    So… Anybody can help me? Im a music producer not a web developer and I have no idea how can I fix that. I tried plugins like Raw HTML and RawR Revisited with no luck…

    Thanks in advance and sorry for my bad english.

    ——-
    Edit: If needed my theme is Souffle from mothemes updated to the latest version.

Viewing 1 replies (of 1 total)
  • Thread Starter Trap Beats & Instrumentals

    (@surcebeats)

    10 years, 7 months ago

    The problem was a Souffle from Mothemes issue that in the Style.CSS of the theme set up a default “max-width: 100%;” for iFrames. You can fix that modifying the style.css and deleting the iframe class from the “max-width: 100%;” section near the video, embed and object section.

    In my case I have solved that setting up “max-width: none;” at that single iFrame in order to keep the theme style files unmodified, the result:

    <center><div id="divplaya" style="width: 641px; height: 223px; overflow: hidden;"><iframe id="ifplaya" style="width: 1280; height: 1080px; margin-top: -539px; margin-left: -188px; max-width: none;" src="http://www.soundclick.com/surcebeats" width="1280" height="1080" scrolling="no" frameborder="0"></iframe></div></center>

    Working! 😀

    Thanks!

Viewing 1 replies (of 1 total)
  • The topic ‘How to show a positioned iFrame properly?’ is closed to new replies.