I want to add some applications which show statistics of my site..
The embed code that piwik gives me is something like
<div id="widgetIframe"><iframe width="100%" height="350" src="http://dap.ntua.gr/el/apps/piwik/index.php?module=Widgetize&action=iframe&moduleToWidgetize=Live&actionToWidgetize=widget&idSite=1&period=day&date=today&disableLink=1&widget=1" scrolling="no" frameborder="0" marginheight="0" marginwidth="0"></iframe></div>
The problem is that sometimes height of iframe is bigger than piwik suggest me to embed..
Some other time the height is less..
How can i solve this problem?
i write height="auto" with no luck
Any suggestion?
Edit: Note that i try this in localhost, but piwik (and also the iframe) is installed into my real site..
Edit2: This lines of code solve the problem http://css-tricks.com/snippets/jquery/fit-iframe-to-content/
Still problem: if the content inside the iframe changes height, this won't adapt
Related
So I discovered a code in codepen that i would like to add to my website. It is of halm and css and i wish to execute the code without embedding codepen entirely. There are no java scripts as far as i know
So far I have tried to copy the css and html code to my wordpress page, am using elementor plugin and oceanwp theme.
here is the link to the pen: https://codepen.io/cells/pen/qzMvjY
<iframe height="265" style="width: 100%;" scrolling="no" title="CSS Raindrops (simple version)" src="//codepen.io/cells/embed/qzMvjY/?height=265&theme-id=0&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen https://codepen.io/cells/pen/qzMvjY/'>CSS Raindrops (simple version) by test
(https://codepen.io/cells'>#cells) on https://codepen.io'>CodePen.
Just don't know how to go about it.
I have the code for iframes but for some reason, it won't work. It will display either an error message or an empty blank, white box. I am not sure if I need to enable the code that the iframe is targeting or if there is something wrong with the "extension".
<iframe src="https://www.w3schools.com" width="80%" height="380px" scrolling="yes">
Maybe because you didn't close the iframe tag?
https://www.w3schools.com/html/html_iframe.asp
<iframe src="https://www.w3schools.com" width="80%" height="380px" scrolling="yes"></iframe>
While working on a project, I discovered some of my images on Tumblr are not displaying. The only clue I've found is that within the responsive-level-1 class (see below for html code), the height of the iFrame is set to 0. If I pop open a dev console in Chrome and set that to be, e.g., 1632 (not 0), the image appears. I'm using a theme (Brick theme/theme garden) , but am able to edit the html and css. Can I modify my css and/or HTML to fix this? The issue occurs across device platforms (desktop/phone/tablet).
Example of no image displayed- http://deligrossery.com/post/149661412746/gawad-deli-grocery-207-hart-st-brooklyn-ny
corresponding css files:
responsive.css: http://static.tumblr.com/eftyn9y/kc0og8vio/responsive.css
style.css: static.tumblr.com/3zmswwt/Fmkmwgp8e/style.css
(^ I can't post more than 2 links until my reputation is at least 10/add an https:// to the style.css).
<iframe id="photoset_iframe_149661412746" class="photoset" scrolling="no" frameborder="0" height="0" width="500" style="border:0px; background-color:transparent; overflow:hidden;" src="http://deligrossery.com/post/149661412746/photoset_iframe/deligrossery/tumblr_ocn1e9dTfK1txl3g8/500/false" name="photoset_iframe_149661412746"></iframe>
Try changing your photoset layout block to something like this (you may need to tweak this slightly):
{block:Photoset}
<div class="content photoset">
{block:Photos}
<img src="{PhotoURL-500}"/>
{/block:Photos}
{block:Caption}
<div class="description">{Caption}</div>
{/block:Caption}
<p></p>
</div>
{/block:Photoset}
Keep a backup of your current theme.
This should output the photoset in the normal html template (not iframe). From there it should be much easier to control the height of the content, in fact by default it should just output the content and the height will be fixed automatically. But there might be other issues to investigate after this.
I have a couple of giphy GIFs that I'd like side by side not vertical, all that I am using are the embed codes.
<iframe src="//giphy.com/embed/5wWf7GX8ia4T1wiMPEA" width="120" height="90" frameBorder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
is there something i can do to add to these codes to enable side by side ...ness, to happen? or do i have to actually figure out how to script something ? cuz it would be great if i can just change or add some words.
thank you for reading this
here is the entire code for the post
<iframe id="visor53e023f8f288a1e6698b4568" width="480" height="360" src="" frameborder="0" scrolling="no"></iframe><script src="//studio.themadvideo.com/player/js/MadVideo.js.php?id=53e023f8f288a1e6698b4568"></script>
Hmm it's hard to answer with so little info, but try adding a display: inline-block; to the iframes style.
<iframe class="side-by-side-iframe" />
.side-by-side {
display: inline-block;
width: 50%; //or just leave it blank if they are small enough
}
This should solve it, and they will display in the same line, unless they are too big for the line.
Ok, so, it's waaaay easier than even I could expect, simply go into the visual tab, drag it so the GIFs appear horizontal.....that's it, no coding, nothing. If it's the wrong size, just move one out of the line then ... back into the line. Or in the Text post tab, just place all the iframes like so
<iframe src="//giphy.com/embed/5wWf7GZTUCuUTm5u8TK" width="120" height="90" frameborder="0" allowfullscreen="allowfullscreen"></iframe><iframe src="//giphy.com/embed/ToMjGpvMXxv6uUaCL9C" width="120" height="90" frameborder="0" allowfullscreen="allowfullscreen"></iframe><iframe src="//giphy.com/embed/HishDXMdGANR6" width="120" height="90" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
basically just place everything (the embeds you want horizontally next to each other, literally either textually or drag and drop so it's all side by side and it'll probably appear side by side, i'm tired and my mind is blown i added the random victory GIF so i'd remember this moment, thanks Pinhas for figuring it out in your way as well.
Please checkout the following code it works perfectly in chrome but not in mozilla firefox. Please help me sort out this problem for firefox.
I want a marquee tag to float over video, ticker like.
I have tried using "relative" and "absolute" position, but somehow z-index over embeded video dosen't seem to work.
Here is the code
I added the ?wmode=opaque at the end of the embed "link".
Check jsFiddle
Your URL : http://www.youtube.com/embed/WfDK-vfPwag?wmode=opaque
also Use <iframe> tag to solve this problem and support all Broswer.
your Updated code
<iframe width="80%" height="100%" src="http://www.youtube.com/embed/WfDK-vfPwag?wmode=opaque" frameborder="0" allowfullscreen></iframe>