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;}
Related
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.
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.
Hers is the url: http://greyhawkfilms.com/whatwedo.html
It plays fine on the iPhone, but when I try to play it on the iPad only the audio plays and no video.
The embed code I'm using is here:
<iframe id="iframe1" src="http://player.vimeo.com/video/57884624" width="768px" height="432px" frameborder="10px" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
This problem seems to be caused by hiding the Vimeo player. I see that you do this in your code:
<div id="about-1-VP" style="display: none;">
<div class="videoplayer">
<div class="closevp"><span class="closevpbutton">(x) CLOSE</span>
</div>
<iframe id="iframe1" src="http://player.vimeo.com/video/57884624" width="768" height="432" frameborder="10" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
</div>4
To avoid this issue, try using another method to hide the iframe element instead of display:none, for example attaching a class that positions the element off-screen, eg
.special-hide
{
position: absolute;
left:-99999px;
}
Then remove the class when it's time to display the Vimeo player.
I have an iframe loaded within a page. This code works fine in firefox but not in ie - it does not load anything following the iframe. If i move the iframe to the bottom of the page everything loads correctly. Has anyone encountered this error before?
head----
<style>
iframe{
margin-left: 22px;
height: 112px;
width: 612px;
}
body{background-color:transparent}
</style>
body---
<img align="left" border="0" src="http://picurl.com"/><br />
<p>text</p>
<iframe frameborder="0" src='http://URL.com'</iframe><br />
<p>big load of text</p>
Text loads fine, content of iframe loads correctly but 'big load of text' does not. Why does this happen? I am using internet explorer 8 for this task, can't change this.
You missed a > from the end of your iframe tag:
<iframe frameborder="0" src='http://URL.com'></iframe>