I have a problem with multiple iframe in firefox on my wordpress site.
I have a twitter "tweet" button and a facebook "like" button. Both of them are iframes that I embed on my site. So far no problem. BUT when I make a post which has got an iframe embedded Vimeo clip in it, the Vimeo clip gets replaced by the "like" button, and the "tweet" button has taken the "like" buttons original position.
I have tested this in Firefox and Chrome. In Chrome it all looks good, but not in FF.
The facebook embed code:
<iframe id="facebook" name="facebook" src="http://www.facebook.com/plugins/like.php?href=<?php echo($url); ?>&layout=button_count&show_faces=false&width=90&action=like&font&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:21px;" allowTransparency="true"></iframe>
The Twitter embed code:
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
Tweet
The embedded Vimeo code in the post:
<iframe src="http://player.vimeo.com/video/22382565?color=17bcda" width="400" height="225" frameborder="0"></iframe>
If you look at the top post there should be a Vimeo clip just below "testing testing testing...". And on the left sidebar you can see the two tweet buttons, which should be one tweet and one like. I want to point out though that all of this is working fine at my localhost. http://www.bentrovato.se/index_wp.php/
Any idea what the problem could be?
I had a similar problem and fixed it by clearing cache
Click the Firefox button > Options > Options > Advanced.
In the Cached Web Content section click on Clear Now.
Related
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 will host videos from my server for users. Users can embed videos... Currently I am writing the php script. But I have a problem with embed codes. The problem is, cannot fullscreen on html5... Player support html5 & flash player. If player is flash users can go fullscreen from embed code. But on html5 player can't go fullscreen. Youtube's embed codes can go fullscreen but YouTube uses html5 too. Here is the code that i used:
<iframe width="530" height="270" src="http://videohost.tk/embed/0f2c67c9b" frameborder="0"></iframe>
If you enter the link directly you can go fullscreen. But on iframe you cannot... How can I fix it?
I think your iframe element needs to include the allowfullscreen attribute.
Here is the update code with the new fullscreen attribute as an example:
<iframe width="530" height="270" src="http://videohost.tk/embed/0f2c67c9b" frameborder="0" allowfullscreen></iframe>
Just wanted to point out: For IE to recognize the frameborder attribute, it needs a capital B, as in frameBorder. All other browsers seem to recognize both options, so the 'B' is a good failsafe for compatibility. According to the MSDN docs, allowfullscreen should work just fine in IE, although that might only pertain to HTML4.
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>
I have been using the Facebook Like Box in this template, it's showing good in opera, IE, and Firefox. But its not showing in chrome and safari, just showing a blank space. Bottom right section, under the meet us on title.
Please click this link
Try using https:// protocol to load the iframe
so you will have:
<iframe id="facebook" frameborder="0" scrolling="no" allowtransparency="true" style="border:none; overflow:hidden; width:314px; height:240px;" src="https://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FFacebookDevelopers&width=314&height=290&colorscheme=dark&show_faces=true&header=true&stream=false&show_border=true"></iframe>
...Summary of the problem...
Example of what works
Title attribute works great on image, for example
<img
src="http://imgs.xkcd.com/comics/the_general_problem.png"
title="I find that when someone's taking time to do something right in the present, they're a perfectionist with no ability to prioritize, whereas when someone took time to do something right in the past, they're a master artisan of great foresight."
alt="The General Problem"
>
The problem (Example of what doesn't work)
I'm trying to embed an iframe video, like when you click "share this video" off of YouTube or (in this case) SouthPark Studios
It seems that either:
I don't know the right attribute to use with iframe element (it is aparently not "title"), or
"title" is corect, but iframe trumps it with some kind of layering issue. See below
...Further reading: Details on what I already tried...
1st try: Wrap it in a div, & give the div max layer
<div
title="South Park video about Ginger Kids coming in the night to carry off the town's other kids"
style="z-index: 2;"
>
<iframe
src="http://media.mtvnservices.com/embed/mgid:arc:video:southparkstudios.com:1feaa96c-ed01-11e0-aca6-0026b9414f30"
width="360"
height="293"
frameborder="0"
>
</iframe>
</div>
Sources:
https://stackoverflow.com/a/7117107/1421642, for divs
http://www.echoecho.com/csslayers.htm, for layer (z-index)
2nd try: Just put "title" in iframe tag
<iframe
title="South Park video about Ginger Kids coming in the night to carry off the town's other kids"
src="http://media.mtvnservices.com/embed/mgid:arc:video:southparkstudios.com:1feaa96c-ed01-11e0-aca6-0026b9414f30"
width="360"
height="293"
frameborder="0"
>
</iframe>
Results for both trys
El zilcho
In both cases, I mouse over the iframe and nothing happens. Compare that to my "example of what works" code at the very begining, where you can mouse over and see a beautiful little popup
Please help :)
You can give the iframe a title, but it won't appear in the tooltip. Change the frameborder to "2" and move your cursor to it and a title will appear.
To see the title on iframe you must set the title of iframe content and not the iframe itself. ( How to display tooltip when mouse hover iframe )
http://jsfiddle.net/2YGNx/
HTML
<iframe frameborder="1" src="javascript:'<div>Helllo World</div>';" style="width: 100%; height: 100%; margin: 0px; padding: 0px;position:relative;" title="hello world" id="contentIframe"></iframe>
Javascript:
$(document).ready(function () {
$("#contentIframe").contents().find("body").find('div').attr('title','Hello world');
});
However, because you are dealing with a flash video, It won't work that way. Flash likes to 'take over' as an extension, and the browser won't treat it as 'part of the page' in the sense that it will show the tooltip. Your best bet is to create an object with the video url as the source, and then setting the wmode to transparent. ( CSS Hover Tooltip Bubble Being Hidden Behind iFrame Video )