IE seems to ignore elements with higher z-indexes, when they overlap an iframe.
Have read various other posts that suggest adding a combination of &wmode=transparent to the iframe src, and wmode="opaque" attribute to the iframe itself; though IE doesn't seem to like either of these.
<iframe title="YouTube video player" class="media-youtube-html5" type="text/html" width="500" height="300" src="http://www.youtube.com/v/9W82sMSMJJg?hd=1&wmode=transparent" wmode="opaque" frameborder="0"></iframe>
http://jsfiddle.net/7fd8Y/
Any help would be much appreciated.
I have updated your code. Now working fine in IE, just added the wmode parameter through
javascript
jsfiddle
$('iframe').each(function(){
var url = $(this).attr("src");
$(this).attr("src",url+"?wmode=transparent");
});
Refer This post
Your link is wrong, the default link word should be embed,
<iframe src="http://www.youtube.com/embed/9W82sMSMJJg" frameborder="0"></iframe>
but not just v (v-link ignores z-index):
<iframe src="http://www.youtube.com/v/9W82sMSMJJg" frameborder="0"></iframe>
Here is an example for IE:
http://jsfiddle.net/7fd8Y/21/
Related
I have page where all I need is a simple, full-width embedded google map. When I set the custom size of the map to 1980px x 240px, and put the iframe on my page, the width of the map is 1200px by default.
When I open Chrome DevTools window and find the iframe there, there is a style forced to the iframe, that is not in the original iframe I pasted from google maps.
The website is build on Wordpress. Link: https://zubar-litomerice.cz/
The original iframe:
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12061.22772549553!2d14.12158474671251!3d50.54234042444077!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47097f6dc0e9276d%3A0xa7e584e5a1a520cc!2sHavlov%C3%A1+Hana+MUDr.!5e0!3m2!1sen!2scz!4v1533828352977" width="1980" height="240" frameborder="0" style="border:0" allowfullscreen></iframe>
Forced style:
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12061.22772549553!2d14.12158474671251!3d50.54234042444077!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47097f6dc0e9276d%3A0xa7e584e5a1a520cc!2sHavlov%C3%A1+Hana+MUDr.!5e0!3m2!1sen!2scz!4v1533828352977" width="1980" height="240" frameborder="0" style="border: 0px; width: 1200px; height: 145px;" allowfullscreen=""></iframe>
I have searched for answers before asking and could not find anything, but maybe you can help me find the answer I am looking for.
Loop feature is not working.Example
Only a playlist can loop.
As such, there is a workaround by creating a playlist of the video.
https://www.youtube.com/embed/X03jlFijeQ0?playlist=X03jlFijeQ0&autoplay=1&controls=0& modestbranding=1&rel=0&showinfo=0&loop=1
You are welcome to test and play with it here
Also note that you need to set rel=0 as well.
Here is the iframe tag you can use, this is just your video in 'VIDOE_ID' & put repetable video id in 'REPEAT_VIDEO_ID_AGAIN'. It will work 100%.
<iframe width="600" height="315" src="https://www.youtube.com/embed/VIDOE_ID?rel=0&controls=1&showinfo=0&autoplay=1&loop=1&iv_load_policy=3&playlist=REPEAT_VIDEO_ID_AGAIN" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
I have a div container and Iframe inside. I assigned width=200 and height=200.
when I click on full screen, the video becomes blurry with very bad quality. So, I wanted to see if it is possible to disable full screen on youtube iframe.
"I used ?controls=0 at the end of my url and it resolved the issue."
Your answer doesn't solve the problem, you can toggle full screen also double clicking the video. I tried allowfullscreen="0", doesn't work as well.
The same is for ?showinfo=0; also doesn't work.
?showinfo=0 works only if you change link:
https://www.youtube.com/embed/Di2KMatiGAM?controls=0&showinfo=0
to:
https://www.youtube-nocookie.com/embed/Di2KMatiGAM?controls=0&showinfo=0
Use the iframe tag without allowFullscreen to disable the button on the player, for example:
<iframe src="https://www.youtube.com/embed/12345"></iframe>
To allow fullscreen just add allowFullscreen:
<iframe allowfullscreen="0" src="https://www.youtube.com/embed/#(item.VideoUrl)"></iframe>
when you have a video on youtube you can share it. it also displays an option to embed it.
you probably have a <iframe></iframe> in your code
mine looks like this:
<div class="IFR" alt="-">
<iframe width="560" height="315" src="https://www.youtube.com/embed/AdfFnTt2UT0 rel=0&controls=1&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" donotallowfullscreen>
<p>
Your browser does not support Iframes <br>
I suggest that you use Google Chrome or FireFox
</p>
</iframe>
</div>
the thing that matters here is "donotallowfullscreen".
if you set this to "allowfullscreen" you will be able to use fullscreen.
TLDR: in the Iframe tag where your YT video is located, add "donotallowfullscreen" at the end. and its fixed
I used ?controls=0 at the end of my url and it resolved the issue.
<iframe title="video player" src={videoSrc} allowfullscreen="0"/>
React- Full Screen Fix for youtube API
You can remove the full-screen option from the youtube embed video by using fs parameter in the youtube embed URL
Example:- youtube embed URL https://www.youtube.com/embed/youtubeid
Add query parameter of fs in the above URL
https://www.youtube.com/embed/youtubeid5?fs=0
Special thanks to ecoe
To allow fullscreen in iframe add allowfullscreen attribute in the iframe
<iframe class="iframe-embed" [src]="url_link|safe" allowfullscreen>
</iframe>
I would like to embed a video with autoplay and from a specifick time.
I tryed this way:
<iframe src="https://youtube.com/embed/HPOcZtfjrrU?start=75?autoplay=1"></iframe>
But this not realy working, only one "?" can work, not two, if I use one, the video working, but I need all.
Is that possible embed video in iframe with this two attribute?
try like this...
https://youtube.com/embed/HPOcZtfjrrU?autoplay=1
<iframe width="420" height="345" src="http://www.youtube.com/embe/XGSy3_Czz8k?autoplay=1">
</iframe>
you have to remove
start=75. try this..
<iframe src="https://youtube.com/embed/HPOcZtfjrrU?autoplay=1"></iframe>
And the answer is:
You need to replace question mark for: "&"
So the correct code is:
<iframe src="https://youtube.com/embed/HPOcZtfjrrU?start=75&autoplay=1"></iframe>
Please checkout the following code it works perfectly in chrome but not in mozilla firefox. Please help me sort out this problem for firefox.
I want a marquee tag to float over video, ticker like.
I have tried using "relative" and "absolute" position, but somehow z-index over embeded video dosen't seem to work.
Here is the code
I added the ?wmode=opaque at the end of the embed "link".
Check jsFiddle
Your URL : http://www.youtube.com/embed/WfDK-vfPwag?wmode=opaque
also Use <iframe> tag to solve this problem and support all Broswer.
your Updated code
<iframe width="80%" height="100%" src="http://www.youtube.com/embed/WfDK-vfPwag?wmode=opaque" frameborder="0" allowfullscreen></iframe>