Facebook iframe is not affected by css - html

<footer class="mastfoot">
<div class="inner">
<iframe class="iframe" src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fmyfacebookpage%3F&width&layout=button_count&action=like&show_faces=true&share=true&height=21&appId=705841689490152" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe>
</div>
</footer>
I have this iframe, he is a facebook like facebook page button.. i want setup display none in my css, but doesn't work, the css doesn't effect the iframe..
.iframe {
display: none;
}
what could be the problem?

It´s not about applying CSS to an iframe, because you just want to apply the CSS to the iframe tag itself, right? Give it an ID and try again, always worked for me:
<iframe id="myIframe" src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fmyfacebookpage%3F&width&layout=button_count&action=like&show_faces=true&share=true&height=21&appId=705841689490152" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe>
CSS:
#iframe {
display: none;
}

Related

Embedding MS Form iframe scrolling="no" does not work

I am trying to embedthis MS Form into SquareSpace but I get 2 scroll bars in the page (one for browser and one for this form).
<iframe width="460px" height= "1000px" scrolling="no"
src= "https:...&embed=true"
frameborder= "0" marginwidth= "0" marginheight= "0" style= "overflow:hidden; border: none; max-width:100%; max-height:100vh"
allowfullscreen webkitallowfullscreen mozallowfullscreen msallowfullscreen> </iframe>
I was wondering if there is a way to remove the scrollbar for the form and have only the browser scoller? Obviously the page gets a longer scroll depending on size of the form in each step
Thanks a lot in advance
Yup, add this attribute to your iframe:
scrolling="no"
example:
<iframe src="http://iFrameSource.com" scrolling="no" style="width: 550px; height: 500px; overflow: hidden;" ></iframe>
Source: Remove scrollbar from iframe
You can do it by adding following CSS.
<style type="text/css">
body {margin:0; overflow: hidden;}
iframe {border: none;}
</style>
<body>
<iframe height="100%" width="100%"
src="yourframe1.html"></iframe>
<iframe src="yourframe2.html"
width="100%" height="100%"></iframe>
</body>

HTML iframe not working when i write src= of facebook

I have this code that is working ok:
<div class="facebook">
<div id="likebox-frame">
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fbigfishbudapest&width=320&colorscheme=light&show_faces=false&border_color=&stream=true&header=false&height=395"
scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:320px; height:395px;" allowTransparency="true"></iframe>
</div>
</div>
I need that instead of taking me to this facebook fan page:
https://www.facebook.com/bigfishbudapest/
It needs to take me to this facebook fan page:
https://www.facebook.com/bigfishlaspalmas/
Facebook is using a X-Frame-Options in the HTTP response header so you can't load in a iFrame.
you can go through this
Updating the page reference in the source (src) attribute will display the page you specified.
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fbigfishlaspalmas&width=320&colorscheme=light&show_faces=false&border_color=&stream=true&header=false&height=395"
scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:320px; height:395px;" allowTransparency="true"></iframe>
src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fbigfishbudapest&width=320&colorscheme=light&show_faces=false&border_color=&stream=true&header=false&height=395"
src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fbigfishlaspalmas&width=320&colorscheme=light&show_faces=false&border_color=&stream=true&header=false&height=395"

How can I put my YouTube videos on the same line?

I would like to put both my YouTube videos on the same line. I tried adjusting the iframe and creating a wrapper, but it doesn't seem like I'm targeting the right things. I'm not sure where I went wrong. Here's my JFiddle: https://jsfiddle.net/6a73m27n/
.content {
margin-top: 15px;
}
iframe {
float: left;
}
<div class="video_wrapper">
<iframe width="400" height="200" src="https://www.youtube.com/embed/3S_dmC2soik" frameborder="0" allowfullscreen></iframe>
<iframe width="400" height="300" src="https://www.youtube.com/embed/bdGhmMzj4uE" frameborder="0" allowfullscreen></iframe>
</div>
Just mention the width of the video in percentage as shown below:
<div class="video_wrapper">
<iframe width="40%" height="200" src="https://www.youtube.com/embed/3S_dmC2soik" frameborder="0" allowfullscreen></iframe>
<iframe width="40%" height="200" src="https://www.youtube.com/embed/bdGhmMzj4uE" frameborder="0" allowfullscreen></iframe>
It actually works if you have enough width for both of them on one line.
Despite that, I would recommend you to put this styling to the iframe instead:
iframe {
display: inline-block;
vertical-align: top; /* or middle, bottom, baseline by your preference */
}

Hide a image behind a border in html, css

I wish to hide a video behind a border and appreciate any help I can get. This is what I have now with the image above the border.
<div style="padding:20px;background-color:#000000;border:15px outset #b9b9b9;font-family:courier;">
<iframe width="550" height="315" src="//www.youtube.com/embed/S_UTUXDs-tE?rel=0" frameborder="0" allowfullscreen></iframe>
try this give iframe width 100% and wrap it inside div like this
<div style="padding:20px;background-color:#000000;border:15px outset #b9b9b9;font-family:courier;">
<iframe width="100%" height="315" src="//www.youtube.com/embed/S_UTUXDs-tE?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
add to div style:
style="position:relative;overflow:hidden;width:550px;height:315;"
I don't think what you try to do is allowed by youtube.
but you can just say this on the iframe:
style="visibility=hidden;"
Although it violates the Youtube Terms of Service, just to answer how to do it for the sake of knowledge
This will be your HTML
<div style="padding:20px;background-color:#000000;border:15px outset #b9b9b9;font-family:courier;" class="yt-vid">
<iframe width="550" height="315" src="//www.youtube.com/embed/S_UTUXDs-tE?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
in your CSS
.yt-vid > iframe {
position: relative;
z-index: -1;
}
I do not encourage you to do this. You should not do this actually.
You can use style="visibility: hidden;" css tag in iframe. Or just give 0 (zero) width to iframe.

HTML embedding video

I like to embed a video on my page as well as have some padding below it. I have the following but not sure if there is a more efficient way of doing it:
<div style="text-align: center;">
<iframe width="560" height="315" src="http://www.youtube.com/embed/ti_E2ZKZpC4" frameborder="0" allowfullscreen></iframe>
<br />
<br />
</div>
Also how would I put a thin line border around it with text describing what the video: meaning I like to show Chemistry below the video which will then have a border around the video and the text Chemistry.
The most efficient way to accomplish this in my opinion would be to use CSS to give the containing div a border, and give the iframe a bottom margin. The text can then go below the iframe inside the containing div.
The HTML can look something like this:
<div id="container">
<iframe id="vid" width="560" height="315" src="http://www.youtube.com/embed/ti_E2ZKZpC4" frameborder="0" allowfullscreen></iframe>
<p>Text/description go here</p>
</div>
And the CSS:
#container {
border: 1px solid red;
width: 560px;
text-align: center;
}
#vid {
margin-bottom: 25px;
}
Here is a jsfiddle example: http://jsfiddle.net/kSfCR/3/
EDIT: Formatting...
How about simplifying it?
.myvideo {
margin:0 0 30px;
}
<iframe class="myvideo" width="560" height="315" src="http://www.youtube.com/embed/ti_E2ZKZpC4" frameborder="0" allowfullscreen></iframe>