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>
Related
I'm making a responsive website and I have a few Youtube videos on it. When I view my site on > 479px resolution, the videos stay at the center, but when I view on phone screen resolution or when I scale down my browser to < 480px, the videos float all the way to the right. Right now Im using text-align: center to center the video.
Here's my code:
.youtube{
text-align: center;
}
<p class="youtube">
<iframe width="560" height="340" src="https://www.youtube.com/embed/Ubl3r5mGRtg" frameborder="0" allowfullscreen></iframe></br>
<iframe width="560" height="340" src="https://www.youtube.com/embed/xgr38LWUf7w" frameborder="0" allowfullscreen></iframe></br>
<iframe width="560" height="340" src="https://www.youtube.com/embed/ylT54zdmGCk" frameborder="0" allowfullscreen></iframe>
</p>
You could add to your css:
iframe { max-width: 100%; }
And maybe fix the height with some media queries.
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 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
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>