When I paste the iframe code directly into the source code view of TinyMCE and click save it changes the code to:
View TinyMCE code after saving adds </p>
<iframe src="http://maps.google.co.uk/maps" width="425" height="350" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></p></iframe>
View HTML source of HTML page:
<iframe src="http://maps.google.co.uk/maps" width="425" height="350" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"/>
Original iframecode
<iframe src="http://maps.google.co.uk/maps" width="425" height="350" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
This is effecting the rest of the page layout and breaks the footer.
I am using Silverstripe 2.4.5 if this helps.
TinyMCE is not too much of an iframe fan. There are at least three (more or less) quick fixes:
If it's only for Google maps and always at a fixed position, you can use the Addressable module: http://deadlytechnology.com/silverstripe/google-map-module/
If it's only for Google maps but just anywhere in the $Content field, you might want to try short codes: http://www.ssbits.com/tutorials/2010/2-4-using-short-codes-to-embed-a-youtube-video/
Fix TinyMCE's mess on the server side within the onBeforeWrite() method: http://www.silverstripe.org/general-questions/show/16438#post305472
If you can use 2., take a look at a complete example:
PHP code: https://github.com/xeraa/silverstripe-book/blob/master/chapter-06/mysite/code/Page.php#L42
Template: https://github.com/xeraa/silverstripe-book/blob/master/chapter-06/mysite/templates/Includes/GMap.ss
Actually the easiest solution is in the TinyMCE click the little HTML icon (next to the anchor) and then paste the iframe code there. This way it will not replace the html tags to </p>
Related
I use TYPO3 news related link to embed a Youtube video.
In fluid I have use this code:
f:format.htmlspecialchars()} src="{relatedLink.uri}" width="480">
The result is: <iframe allowfullscreen="" frameborder="0" height="270" title="Test video title src=" https:="" www.youtube.com="" embed="" 0ofotivopuo?ecver="1"" width="480"></iframe>
You can see that src have a link with no slashes.
When i debug the same variable {relatedLink.uri} in a tag i get the right url like this : https://www.youtube.com/embed/0oFotIvOpUo?ecver=1
Can anybody give an idea how to fix it ?
The missing quote after title="{relatedLink.title -> f:format.htmlspecialchars()} is probably the reason for your problem.
Fixed version:
<iframe allowfullscreen="" frameborder="0" height="270" title="{relatedLink.title -> f:format.htmlspecialchars()}" src="{relatedLink.uri}" width="480"></iframe>
I have a horror music website and have embedded some HTML5 players into it at www.horror-music.co.uk
I am trying to remove the buy button from the players and I am struggling in finding where to fit the buying=false parameter in my code
My original code is as follows without any adjustments, I was wondering if you would be kind enough to tell me where to insert the piece of code above into my code below so that the buy button does not display:
<iframe
width="100%"
height="166"
scrolling="no"
frameborder="no"
src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/128832115&color=4d1188&auto_play=false&show_artwork=false">
</iframe>
<iframe
width="100%"
height="166"
scrolling="no"
frameborder="no"
src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/128832115&color=4d1188&auto_play=false&show_artwork=false&buying=false">
</iframe>
seems to work for me. So just add &buying=false at the end of the URL.
My client has a wordpress site and one page is embedding a map via iframe:
<iframe
src="http://maps.google.com/maps?q=16162+Beach+Boulevard+%23100,+Huntington+Beach&hl=en&pcsi=2051297199499108728,1&geocode=FUCmAgIdBaP3-A&sll=33.728064,-117.988603&sspn=0.006295,0.006295&ie=UTF8&view=map&cid=2051297199499108728&hq=16162+Beach+Boulevard+%23100,+Huntington+Beach&hnear=&ll=33.730729,-117.987242&spn=0.005354,0.006437&z=16&iwloc=A&output=embed"
height="350"
width="690"
frameborder="0"
marginwidth="0"
marginheight="0"
scrolling="no">
</iframe>
When I view the page in my iPhone, it renders mobile-friendly and resizes the iframe to fit the viewport, but the state and zip code are getting cut off. I tried adjusting the height of the iframe and also the bottom padding, but it seems to be something on Google's end. Any idea how to fix this? I added a blue border to my iframe so you can see that it's not the iframe which is clipping the text:
I recommend posting a link to the site or posting some of the CSS. This would make it easier for the SO community to troubleshoot the issue.
I replicated your issue by removing the iframe attribute width="690". I suspect the Wordpress CSS or some JavaScript is overriding the iframe width and cramming everything into the iPhone screen width.
To override the automatic resizing I just gave the iframe an id and set the width explicitly in my CSS.
#WidthTest {
width:690px;
}
Regardless, I'm sure you can find a similar solution by digging around the Wordpress CSS/JavaScript.
I edited the code. This works great for me! You might want to change the width according to your needs.
<iframe width="380" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?q=16162+Beach+Boulevard+%23100,+Huntington+Beach&hl=en&pcsi=2051297199499108728,1&geocode=FUCmAgIdBaP3-A&sll=33.728064,-117.988603&sspn=0.006295,0.006295&ie=UTF8&view=map&cid=2051297199499108728&hq=16162+Beach+Boulevard+%23100,+Huntington+Beach&hnear=&ll=33.730729,-117.987242&spn=0.005354,0.006437&z=16&iwloc=A&output=embed"></iframe>
I have a standard facebook plugin on my webpage. But though the size is specified, on various occasions (e.g. the PC is not logged in) the text overflows - ignoring the overflow:hidden. In simple words: it does not what it should do. Here goes the code:
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FKLARTEXT%2F207788969239606%3Fref%3Dhl&send=false&layout=standard&width=250&show_faces=false&font=verdana&colorscheme=light&action=like&height=30" scrolling="no" frameborder="0" style="border:none; align:"middle"; overflow:hidden; width:250px; height:30px;" allowTransparency="true"></iframe>
Any ideas?
Can you point us to some specific examples? There were some bugs recently causing social plugins to bleed over their divs. According to the bug tracker these should be fixed by now:
https://developers.facebook.com/bugs/500201816697073
https://developers.facebook.com/bugs/409142149161197
You can always help yourself by putting the social plugin inside another div with overflow:hidden:
<div style="overflow:hidden;width:300px;height:100px;">
<div class="fb-like" data-href="..."/>
</div>
I have the following code to show
<iframe src="http://www.facebook.com/plugins/like.php?href=[mySite]"
scrolling="no" frameborder="0"
style="border:none; width:170px; height:80px"></iframe>
which works great but I wanted to see if i could customize it to:
Not show which one of my friends like it. So instead of saying:
Joe Thompson and 100 other people like this
I just want it to say:
100 people like this
basically I am trying to fit this like button in a small area of real estate on the page adn I want to have more certainly around what will show up
Unfortunately there's no way to https://developers.facebook.com/docs/reference/plugins/like/ change that line of text to read specifically how you want. It can be removed all together yet still show the like count if you change layout to button_count. However with this option, iframe is not available to use, so you'll need to change over to XFBML or HTML5.
you can use this one just change [Enter Your Page URL] with your URL
<iframe src="//www.facebook.com/plugins/like.php?[Enter Your Page URL]&send=false&layout=button_count&width=100&show_faces=false&action=like&colorscheme=light&font=arial&height=21&appId=201523196612824" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>