Iframe, embed youtube not working on firefox - html

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.

Related

iframe Youtube video not displaying

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;}

align an embedded video in HTML

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.

Embedded Youtube player not responding in Chrome

I'm using CSS to stylize a website and have an embedded youtube clip inside of several DIVs like so:
<body>
<div id="wrap">
<div id="outer">
<img src="images/sidebar.png"/ class="sidepic">
<div id="look">
<iframe width="500px" class="youtube-player" type="text/html" height="280px" src="http://www.youtube.com/embed/J-U9aYeLvX0?wmode=opaque&feature=player_profilepage&showinfo=0" frameborder="0" allowfullscreen seamless></iframe>
<img src="images/content-01.png" class="bigpic" />
</div>
</div>
</div>
This works fine in Internet Explorer, but doesn't work in Chrome. The video doesn't detect any hover or clicking, as though it's a static image or hidden.
I've tried to use the ?wmode=opaque / transparent tags recommended in other threads on this site, but it doesn't seem to work. Removing the iframe from the DIV tags allows the video to play, but distorts the rest of the page.

Iframe preventing rest of page from loading?

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>

IFrame scroll bars not coming on Chrome

I am using an IFrame to make show some content from some other domain. The problem is that I can use a specified height and width (which I am using) and the content inside the IFrame cannot be accommodated completely in the IFrame. Hence, I need scrollbars.
I used the following html code -
**<iframe style = "overflow-x:scroll; overflow-y:scroll;" src = "http://shopsocial.ly/merchant/fanpage?merchant_name=cafepress"
height = "400" width = "500">**
This works fine in Firefox. But in Chrome I'm not getting any scrollbar in the IFrame. I have searched this problem and have tried many things all of which did not solve my problem. Can someone help me with this?
In your iframe content add inline:
<body style="overflow:auto;">
or in the css file attached to the iframe
html, body {
overflow:auto;
}
and of course as recommended by Tom make sure you use scrolling="yes" and style="overflow:visible;" on the iframe:
<iframe scrolling="yes" src="http://example.com" style="overflow:visible;"></iframe>
If it still does not work then try to wrap the iframe like this:
<div style="overflow:visible; height:400px;">
<iframe scrolling="yes" src="http://example.com" style="overflow:visible; height:2000px;"></iframe>
</div>
Instead of using the CSS style you could use the scrolling property of the iframe and set it to yes (i.e. always display scrollbars):
<iframe scrolling="yes" src="http://domain.com" height="400" width="500"></iframe>
Yap Tom is absolutely right you can use
<iframe style="overflow:visible; width:400px; height:400px;" frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" src="yourfile.html"></iframe>
and it should be work as i have tested.
If it still does not work then update Chrome to latest version. :)
To make this scrollable on all mobile devices (specially iPhone devices), you will need to add CSS to the div around the iframe:
<div style="overflow: auto!important; -webkit-overflow-scrolling: touch!important;">
<iframe scrolling="yes" src="http://example.com" height="400" width="500">Loading...</iframe>
</div>