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>
Related
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 */
}
I have a problem with one WordPress theme.
This is URL of my site and if you scroll down to the iFB section
then you will see a video there.
I have entered this code to put it to this page
<iframe
src="https://www.youtube.com/embed/KO2hFoKDh18"
width="560"
height="315"
frameborder="0"
align="middle"
allowfullscreen="allowfullscreen"
></iframe>
but still going left.
Anyone that can help me?
<iframe src="https://www.youtube.com/embed/KO2hFoKDh18" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
element.style {
margin-left: 400px;
}
if you want to align your data than you can align it many ways. align center was not working do you to inheritance so you could it with css. make a class here style. so in script tag you can give margin-left so it will move towards right adjust as you need.
.style {
margin-left: 400px;
}
</style>
<iframe class="style" src="https://www.youtube.com/embed/KO2hFoKDh18" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
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.