I would like to place a static image on top of the YouTube Video Player; however, it appears as if they somehow block this from occurring?
So far I have tried setting the z-index higher than the YouTube player but this does not work.
For example:
<img src="../example.png"/ width="100" height="100" class="image" />
<iframe width="420" height="315" src="http://www.youtube.com/embed/k6U-i4gXkLM" frameborder="0" allowfullscreen></iframe>
.image { position: absolute; z-index: 10000; }
Your code works perfectly. Just the slash after "../example.png" is unnecessary but it will work anyway.
You should be able to add wmode=transparent to the youtube iframe url. See:
Youtube iframe wmode issue
A working example:
http://www.parentmap.local/article/webinar-parents-guide-to-college-admissions
Notice how the flyout menu overlaps the video iframe.
If that won't work for some reason, you could load the youtube preview image using javascript, then put your overlay on top of that. Only load the real iframe when someone actually clicks the element.
Quick googling finds this on youtube images:
http://www.reelseo.com/youtube-thumbnail-image/
Example from that page of preview image URL:
http://img.youtube.com/vi/bQVoAWSP7k4/0.jpg
Related
I have a wordpress gaming site where I wish to embed videos. I wish to embed them using URL's.. EG: This video:
https://xboxclips.com/EGGY+BREAD+1/a880ece5-e801-4a2e-928e-2f4f28c9ce2f
I want displaying on this page: https://www.onelastgo.com/fortnite-videos/
You will see what I'm trying to do if you click the link. However, on mobiles, you can only see the left side of the video unless you scroll across. Is there and easy way to set something to 100% so that it displays 100% of the screen width ? This is what I have so far..
<iframe src="https://xboxclips.com/EGGY%20BREAD%201/a880ece5-e801-4a2e-928e-2f4f28c9ce2f/embed" width="100%" height="400px" frameborder="0" allowfullscreen="allowfullscreen"><span data-mce-type="bookmark" style="display: inline-block; width: 300px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></iframe>
I have tried a few plug ins but none of them support the gaming clip URL. If I upload it to YouTube there's probably some nice YouTube plug ins but I thought a simple embed would be handy as I will need to keep changing the clips overtime.
Many Thanks.
I have a PDF file embed inside my web page. My HTML is:
<embed src="http://znaci.net/zb/4_1_19.pdf">
My CSS is:
embed {
width:500px;
height:600px;
}
Now I have a situation like this:
But I need this:
Is there a way to center embed PDF content?
You can control the height and width via CSS like such:
<style>
embed {
width: 100%;
height: 500px;
}
</style>
You also control it via attributes in the embed tag like such:
<embed src="http://znaci.net/zb/4_1_19.pdf" width="640" height="480">
As for the zoom, you can achieve this by doing the following (note the #zoom=75):
<embed src="http://znaci.net/zb/4_1_19.pdf#zoom=75">
This syntax worked in IE11 and FF32, but not in Chrome 38.
Edit: Answer to the centering part of the question:
Centering the PDF only fails in Chrome. A work around for this can be to replace the embed tag with an iFrame like such (though I don't think this is the best practice).
<iframe src="http://znaci.net/zb/4_1_19.pdf"></iframe>
Alternatively, you can look at some thing like pdf.js.
I am using an "emailmeform" in an iframe for a contacts page and the background won't go transparent. I have added allowtransparency="true" to the iframe and it's doing nothing.
I know I should add <body style="background:transparent"> into the source to make this normally work but I have the exact same iframe on another page and the transparency works, but trying it on this new page with the same code for some reason doesn't work.
Here's the bog standard iframe code, I just can't see what's going wrong.
<iframe width="100%" height="600" allowtransparency="true" frameborder="0" scrolling="no" style="border:none" src="http://www.emailmeform.com/builder/embed/Mnc79QelZ4v8r">
</iframe>
allowtransparency is NOT in <iframe> specification, thus it is doing nothing. This keyword support is removed since IE9.
background: transparent is doing nothing either. It depends on how browser renders this transparency. In short, avoid using transparent background.
The transparent keyword maps to rgb(0,0,0).
Sidenote: However, similar parameter exists in XUL, but this does not apply to your case.
Reference:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
https://developer.mozilla.org/en-US/docs/Web/CSS/background-color
I am working on this site for a client of mine.
Issue is that the dropdown menu on the home page hides behind the embedded youtube player. It seems to be a simple css problem involving z-index but I have been unable to solve it. Maybe it has something to do with the youtube embed.
I have tried to set the z-index of the menu but it does not seem to be effective.
I almost forgot to tell you that the problem occurs on IE9 specifically.
Also, I'm not a css expert so please just point out what the issue is.
Use below code for youtube iframe:
<iframe width="597" height="323" src="http://www.youtube-nocookie.com/embed/Rahab_AMCkE?wmode=transparent" rel="0" frameborder="0" allowfullscreen=""></iframe>
Add wmode=transparent" just after the source(src) of video
This is a Flash issue. When embedding Flash, the default is wmode=window, making the SWF overlay any HTML object on the page. To avoid that, use wmode=opaque or wmode=transparent which allow HTML elements to overlap SWF content. For more info and the difference between the two see Adobe's help.
Define your css style like this.
.navigation ul ul{
z-index:3;
}
.lcd{
position:relative;
z-index:1;
}
use
_z-index:1000001;
do not remove
z-index: //whatever;
i have an iframe nested inside another iframe, and for both iframes i have these attributes:
frameBorder="0" marginWidth="0" marginHeight="0" scrolling="no"
Ive also tried:
style="border: 0px; margin: 0px; padding: 0px;"
It seems that no matter what I try, the border of the inner iframe keeps showing, as well as the padding within the inner iframe. This is also only the case for IE (v. 8), for firefox it works fine and shows no borders.
Is there any way to get rid of this?
Capitalize the letter B in "frameborder"
<frameBorder="0" ... >
It's an IE thing...
use frameborder="0" attribute:
<iframe frameborder="0" src="..." />
Unfortunately, do not know, how to set this using CSS.
I've spent so much time busting my head over this one :)
If you have not defined any values for the DIV in which your IFRAME is located, a border appears by default. I usually put my IFRAMEs in the body section of a separate HTML file. I add this line of code in my CSS file and boom! Problem solved.
body {
padding:0;
margin:0;
}