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"
Related
I'm trying to embed a podcast into my flask website, and I'd I'm using bootstrap. When I embed using bootstrap. This is the code for the embed:
<div class="embed-responsive embed-responsive-1by1" style="display:block;">
<iframe class="embed-responsive-item" src="https://anchor.fm/torasimecha/embed/episodes/Braishis---Imperfect-is-Very-Good-ekuhka"
</iframe>
</div>
It loads fine and adjusts based on the size of the window, which is what I want, but it also includes a lot of space below the actual content that pushes the rest of the content on my website down.
This is the link I'm embedding.
Is there a way to get rid of the space below the actual content in the ?
Simply add scrolling="no" to disable scrolling like this:
<div class="embed-responsive embed-responsive-1by1" style="display:block;">
<iframe class="embed-responsive-item" scrolling="no" src="https://anchor.fm/torasimecha/embed/episodes/Braishis---Imperfect-is-Very-Good-ekuhka"
</iframe>
</div>
You can also set the height property to get rid of all the extra space:
<div class="embed-responsive embed-responsive-1by1" style="display:block;">
<iframe class="embed-responsive-item" scrolling="no" height="100" src="https://anchor.fm/torasimecha/embed/episodes/Braishis---Imperfect-is-Very-Good-ekuhka"
</iframe>
</div>
As title... Can I even do that? If so, how to? I've embedded a Vimeo video but failed to add words on it. Javascript is able to use
Many thanks
A solution with a text with an absolute position:
#video-container{
position:relative;
width:auto;
}
#foreground-text{
position:absolute;
top:50%;width:100%;text-align:center;
margin:0 auto;
color: white;font: bold 20px;
}
<div id="video-container">
<iframe src="https://player.vimeo.com/video/36477715" width="100%" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p>Things Programmers Also Know from Billy Keyes on Vimeo.</p>
<span id="foreground-text">Some text</span>
</div>
(video won't work in the snippet frame)
You can also use WebVTT subtitles:
https://developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video
http://html5doctor.com/video-subtitling-and-webvtt/
<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;
}
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.
My (fan) website has this code so far. I want the crop I have specified (-360px on the top and -50px to apply to each iframe, but no matter WHAT I do the other three iframes do not have the crop). Is there a way to make the crop apply to all the iframes? I am completely lost. :(
<div style="overflow: hidden;
margin-top: -360px;
margin-left: -50px;">
<iframe src="http://dragcave.net/view/XD" frameborder="0" width="750" height="450" " scrolling="no"></iframe>
<iframe src="http://dragcave.net/locations/XD" frameborder="0" width="750" height="450" " scrolling="no"></iframe>
<iframe src="http://dragcave.net/locations/XD" frameborder="0" width="750" height="450" " scrolling="no"></iframe>
</div>
iFrames only show the whole page, there's not really any way for you to only show part of a page in an iframe.
What you need to do is some jquery trickery, which you can find here: iframe to Only Show a Certain Part of the Page