Side by Side iframes.....FROM embed codes in WordPress - iframe

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.

Related

Google Embedded Map has a style property forced to it

I have page where all I need is a simple, full-width embedded google map. When I set the custom size of the map to 1980px x 240px, and put the iframe on my page, the width of the map is 1200px by default.
When I open Chrome DevTools window and find the iframe there, there is a style forced to the iframe, that is not in the original iframe I pasted from google maps.
The website is build on Wordpress. Link: https://zubar-litomerice.cz/
The original iframe:
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12061.22772549553!2d14.12158474671251!3d50.54234042444077!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47097f6dc0e9276d%3A0xa7e584e5a1a520cc!2sHavlov%C3%A1+Hana+MUDr.!5e0!3m2!1sen!2scz!4v1533828352977" width="1980" height="240" frameborder="0" style="border:0" allowfullscreen></iframe>
Forced style:
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12061.22772549553!2d14.12158474671251!3d50.54234042444077!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47097f6dc0e9276d%3A0xa7e584e5a1a520cc!2sHavlov%C3%A1+Hana+MUDr.!5e0!3m2!1sen!2scz!4v1533828352977" width="1980" height="240" frameborder="0" style="border: 0px; width: 1200px; height: 145px;" allowfullscreen=""></iframe>
I have searched for answers before asking and could not find anything, but maybe you can help me find the answer I am looking for.

How do I enable iframes in code

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>

Facebook like box not showing news feed

Trying to add my bands like box to my website. I have done this for other websites and it has been fine but this page doesnt display any news feed or anything. I have heard that it wont show posts older than 30 days but I have much newer posts.
ANy help would be much appreciated.
page is www.facebook.com/Sidewaystheband
Existing code:
<iframe src="facebook.com/plugins/…; scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:447px;" allowTransparency="true"></iframe>
Cheers
As I can see from your code that, the src attribute missed a closed double quote.
The code should be:
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FSidewaystheband&width=292&height=590&show_faces=true&colorscheme=light&stream=true&border_color&header=true&appId=YOUR_APP_ID" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:590px;" allowTransparency="true"></iframe>
p.s. recommend to use HTML5 approach if possible

CSS - Popup Layer (with overlay and close button)

I do not know how to describe what I want.
So I did just draw it: http://i.imgur.com/oMFzJ.jpg
This is what I've got so far.
I do not know how to get this overlay
<div id="layer" style="background-color:#212121;border:2px solid #CCCCCC;width:450px;position:absolute;top:20%;left:20%;"> <iframe src="http://www.ebay.com" width="100%" height="300" frameborder="0" scrolling="no"></iframe> <div style="width:100%;"><span style="color:#CCCCCC;float:right;font-size:11px;margin:3px;cursor:pointer;" onclick="document.getElementById('layer').style.display='none';">Close X</span></div> </div>
A quick way to make a modal popup would be to rely on an existing library to accomplish this, consider jQuery UI
In the future please provide more details on what has been tried etc.
I like to use fancybox for my modal popups. The examples on the page use images but you can insert any HTML you'd like.

export piwik report: height of iframe

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

Resources