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.
Related
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 tumblr with many YouTube video posts. I am wondering how I could use CSS to select the {Video-400} post code and hide the automatic controls that show up on the video.
Here is an example of the automatic controls/visible title I am referring to. They only go away once you play the video: http://jaspingo.tumblr.com/post/105022194129/lol-that-last-one-though.
Also, here are a couple of CSS selectors that might be of use (I don't know the exact differences between them).
#content .video{
}
.video{
}
#content .video iframe{
}
And below is the corresponding HTML.
<div id="content">
<div class="posts">
{block:Posts}
<div class="entry">
{block:Video}
<div class="video">
{Video-400}
</div>
{/block:Video}
</div>
{/block:Posts}
</div>
</div>
Any help would be appreciated. I need to understand the difference between the CSS selectors to fully comprehend the way the code works. And yes, i have tried custom embed code from YouTube, but the same problem exists.
I don't know how Tumblr does their embeds, but you can grab the embed code from YouTube without the controls. A typical embed code looks like:
<iframe width="560" height="315" src="//www.youtube.com/embed/F8Z-ayQkK2A" frameborder="0" allowfullscreen></iframe>
If you want to remove the controls after the fact, you need to add ?controls=0 to the end of the src URL. It becomes:
<iframe width="560" height="315" src="//www.youtube.com/embed/F8Z-ayQkK2A?controls=0" frameborder="0" allowfullscreen></iframe>
To demonstrate, here's the same video using the control parameter outside of an embed code.
The only issue you could run into is with Tumblr using the YouTube API to call the video rather than the embed code. In that case, I'm not sure there's much you can do about it unless you have access to the source and the method for pulling the video into your blog.
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
I have a problem with multiple iframe in firefox on my wordpress site.
I have a twitter "tweet" button and a facebook "like" button. Both of them are iframes that I embed on my site. So far no problem. BUT when I make a post which has got an iframe embedded Vimeo clip in it, the Vimeo clip gets replaced by the "like" button, and the "tweet" button has taken the "like" buttons original position.
I have tested this in Firefox and Chrome. In Chrome it all looks good, but not in FF.
The facebook embed code:
<iframe id="facebook" name="facebook" src="http://www.facebook.com/plugins/like.php?href=<?php echo($url); ?>&layout=button_count&show_faces=false&width=90&action=like&font&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:21px;" allowTransparency="true"></iframe>
The Twitter embed code:
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
Tweet
The embedded Vimeo code in the post:
<iframe src="http://player.vimeo.com/video/22382565?color=17bcda" width="400" height="225" frameborder="0"></iframe>
If you look at the top post there should be a Vimeo clip just below "testing testing testing...". And on the left sidebar you can see the two tweet buttons, which should be one tweet and one like. I want to point out though that all of this is working fine at my localhost. http://www.bentrovato.se/index_wp.php/
Any idea what the problem could be?
I had a similar problem and fixed it by clearing cache
Click the Firefox button > Options > Options > Advanced.
In the Cached Web Content section click on Clear Now.
Am not able to remove the background color in an IFrame so please help me.Am running out of my precious time :-(
Though this is not PHP related, I think you are seeking for an answer as follows. If you have access to editing the content of the page that is being directed to with the iFrame, then you can use a simple CSS property to remove the background. Try adding this to the head of the document:
<style type="text/css">
body {
background-color:transparent;
}
</style>
If this page will be accessed at anytime outside of the iFrame, simply set a PHP (if-statement should work if you set a certain variable) to enable/disable this bit of code if it's being accessed by the iFrame page.
In your iframe add this parameter
allowtransparency="true"
So your iframe should look something like this (copied from your page)
<iframe src="http://www.orangerich.info/crm/freetrialform/form.php" height="360" width="320" frameborder="0" scrolling="No" allowtransparency="true"></iframe>
Good luck!
Dennis M.