I am learning HTML and I'm creating a project using HTML. I embedded a youtube video and it shows up fine, but it's crossing the horizontal border below it and I was wondering if there was anyway to fix that. I tried aligning it to the top of the page, but that didn't work. Is there any inline CSS I can use?
Screenshot:
Code:
<iframe width="560" height="315" src="https://www.youtube.com/embed/rEUz-mBcGV8"
frameborder="0" allowfullscreen></iframe>
In your CSS you can use.
position: absolute;
bottom: ?px;
Play with the pixels in bottom to see how far up you want it to go.
Related
I have this accordion which basically consists of an outer div with a set height and overflow-y: hidden, and an inner div with dynamic content fed from a CMS (and a button to remove the height and overflow-rules from the outer div, very simplified).
Sometimes the content in the inner div contain an embedded Youtube video (iframe). Whenever the Youtube video is being "cut off" by the outer div's overflow-y: hidden, a problem occurs. When you start interacting with the video, giving it focus by clicking play, stop et.c., the video scrolls into view and any content placed above the video might disappear out above the upper edge of the outer div thus becoming invisible. It is not possible to scroll it back into view, as the outer div has overflow-y: hidden which disables the scrolling just like expected - but apparently not when giving focus to the video.
Is there a way to prevent the scrolling of the divs when giving the video focus? Apparently overflow-y: hidden is not enough. I have faced this problem in Chrome. In Firefox, it seems to work fine by default - no scrolling occurs when fiddling with the video.
If possible, I'm looking for a CSS only solution, preferably no JS.
I have created a codepen to illustrate the problem where you can see it in action: https://codepen.io/monodrive/pen/poEraWK
The very simplified code looks like this (the accordion functionality has been completely left out since it's not relevant for reproducing this behaviour).
HTML:
<div class="outer">
<div class="inner">
Hello there. This text comes from the inner div. It will scroll out of the viewport once you start interacting with the Youtube video below, and cannot be scrolled into view again. Can the initial scroll be prevented? (seems to happen in Chrome only)<br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/DWcJFNfaw9c" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
CSS:
.outer {
max-height: 250px;
overflow-y: hidden;
border: 1px solid green;
}
Update: I just tried opening the files in Chrome instead of Firefox. The video appears in Chrome, but not Firefox. Does anyone know why?
I am a beginning website designer trying to embed a youtube video in my webpage, but for some reason it is not showing up. There is a ghost object taking up the same amount of space as the video would, but the video itself is not showing. I have researched how to embed videos, and I do not understand why it's not working. Any tips are appreciated!
HTML:
<iframe class="video" width="560" height="315" src="https://www.youtube.com/embed/oTSGrL04wwU?rel=0" frameborder="0" allowfullscreen></iframe>
CSS:
iframe.video{
position: relative;
left: 260px;
padding: 20px;}
Right now I am working with an iFrame for HTML and I am trying to center align this image. When I type in align = "middle" it doesn't seem to work. I wan to place this GIF in a website. Aligning it in the center would make it look nice.
<iframe src="http://gifyoutube.com/embed/mG9rRw" frameborder="0" scrolling="no" width='480' height='270' style="-webkit-backface-visibility: hidden;-webkit-transform: scale(1);" ></iframe>
That is not a GIF. That is a video (either MP4 or WebM (depending on your browser)) which is embedded in the iframe. It's so small and could easily be converted into a GIF, but that's not the question here.
Add this CSS to your iframe and it should align it in the middle horizontally.
display: block;
margin: 0 auto;
http://jsfiddle.net/odezpjLy/
Check out the JSFiddle above for an example.
Place it in a div wrapper, and center the item in the <div>:
#wrapper
{
text-align:center;
width:100%;
}
<div id="wrapper">
<iframe src="http://gifyoutube.com/embed/mG9rRw" frameborder="0" scrolling="no" width='480' height='270' style="-webkit-backface-visibility: hidden;-webkit-transform: scale(1);" ></iframe>
</div>
I put an iframe youtube code in div tag.
<div id="wrap">
<iframe width="300" height="315"
src="//www.youtube.com/embed/82fn4mcNGJY"
frameborder="0" allowfullscreen></iframe>
</div>
When I use css to set scale for this div tag, Firefox does not display the video
#wrap{
transform: scale(1.06667);
transform-origin: 0px 0px 0px;
}
link to demo
the reason that your are using css property
transform: scale(1.06667);
it will work fine without this property
Of course it'not a response..but I have exactly the same problem.
It don't works only on youtube video (maybe an embed problem). It the src iframe attribute point to another generic website,it works fine.
The problem is only on Firefox linux. It's all right on FF for OSX.
I have a youtube video that is embedded, but the menu that has a fixed position is not scrolling over it; rather, the video is overlaying the menu upon scrolling.
The following snippet of code shows what I have currently tried.
<iframe id="lesson_demo" style="position: relative; top: 115px; left:430px; " width="450" height="280" src="http://www.youtube.com/embed/ae_DKNwK_ms&wmode=transparent" frameborder="0" allowfullscreen></iframe></p>
&wmode=transparent
?wmode=transparent
&wmode=opaque
?wmode=opaque
None of these variations have worked. Please let me know if you've found a fix for this.
change your link to this
http://www.youtube.com/embed/ae_DKNwK_ms?wmode=transparent
that is all you need.
Working example
Edit:
Remove the position: relative from the <iframe> for it to work.