Well, try this on fiddle :
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//platform.twitter.com/widgets/tweet_button.html?url= http://www.youtube.com/watch?v=vabnZ9-ex7o" style="width:100px; height:32px;"></iframe>
when you OPEN the page you will see "0" on twitter. But, if you "run it" (on fiddle) it will show "24". Why? And How can I fix it?
To me is seems like a connection issue. As you click the fiddle the first time, you get the same behavior as you experience on Twitter. However, when you click run to update, it works the way it should.
... and what exactly do you mean by OPEN?
edit:
The IFrame uses the referral url. If you take a look at JSFiddle, the counter links to how many have shared the page where the IFrame is present. Instead of the YouTube url you provide using the src attribute.
This makes sense when you think of the actual use of the Tweet-button.
But it is still a bit odd, that the count it shows on JSFiddle refers to the YouTube link you provided and not JSFiddle.
However, if you do remove the YouTube link you can in fact see the counter change to how many who's shared JSFiddle's display page.
This confirms, that providing a external source to the IFrame is not a decent way of making this work.
If this is necessary, the button must be created using the anchor element instead of using IFrame.
See this https://dev.twitter.com/docs/tweet-button
Related
Long time lurker, first time poster. Please be gentle.
I am trying to get some vimeo videos running within a fancybox gallery. I've followed what I think are the instructions, my HTML looks like this:
class="iframe" href="'https://player.vimeo.com/video/xxxxxxx'"
When I open the link, the fancybox opens fine but shows a black box.
If I inspect the page, I see this:
iframe id="fancybox-frame1655194956187" name="fancybox-frame1655194956187" class="fancybox-iframe" allowfullscreen="allowfullscreen" allow="autoplay; fullscreen" src="//player.vimeo.com/video/xxxxxxx?autoplay=1&hd=1&show_title=1&show_byline=1&show_portrait=0&fullscreen=1&h=xxxxxxx" scrolling="no"></iframe
What I think is intersting is the 'src=' bit which seems to be stripping "https:" from the src. If I manually edit that element in the browser, everything works fine.
Further, if I substitute a Vimeo video for a Youtube one, it works fine.
Any tips are greatly appreciated!
Thanks.
My Youtube embed appears in Chrome and Firefox, but it doesn't appear in Safari (which includes mobile Safari on the iPhone). I get the same result using Vimeo or native HTML5 video - nothing appears in this div. Here's a 1-minute video that shows exactly what's happening:
https://www.youtube.com/watch?v=YnqDlmYOKW8
I tried z-index, position, changing the width and height of the iFrame, changing https to http, removing encrypted-media in the embed code, and so much more.
The website is https://waltrib.com/shop/ and the test product is "Heavy Dirt". I'm using a plugin called Booster Wordpress that allows me to change product images into custom HTML (so I'm using it for Youtube embeds).
At 0:48 in the video above - what's bizarre is that when I open the Developer Inspector and add anything like www then the iFrame appears. Weird. When browsing in Safari, it renders Youtube embeds on every single page of the website, except for the /shop page.
I read this stackoverflow which suggests using object but that didn't work.
Has anything seen a bug like this? It's one of the strangest things I've seen recently.
Instead of :
src="https://youtube.com/embed/5i9SzaumaRg"
Use:
src="https://www.youtube.com/embed/5i9SzaumaRg" // Note the "www"
Sounds silly, but works.
Update:
It seems a change in URL of any kind refreshes the iframe and hence it appears so following would work:
let i = document.getElementsByTagName("iframe")[0];
i.setAttribute("src",i.getAttribute("src")+"?r=4535");
Execute this code only after iframe is loaded. Use load handler for that.
Try adding parameters to iFrame src link:
<iframe src="https://youtube.com/embed/5i9SzaumaRg?enablejsapi=1&origin=https://example.com/" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
More on my answer here.
I am having a website.
I want it to be displayed as an Iframe on my partner site.
<iframe src="http://www.mywebsite.com"></iframe>
However, when he try to see it, nothing is showing up, blank page, but if he change the same iframe source to youtube for example, he got the videos.
Very strange, any idea where the problem is coming from ?
Cheers
I've made no code changes, but in the last few hours, all my embedded youtube videos (using the new iframe html5 method) started autoplaying.
From searching around online, I found some that recommended putting ?autoplay=0 in the src URL, but that doesn't work.
Another suggestion said I'd have to go back to the old method, and that that's the only one that allows us to turn off autoplay.
I'd really rather not do that, but certainly will if I need to, but the bigger question is,
Q1: Is there another way to stop it from autoplaying other than reverting to the old embed?
Side question: What changed in the past few hours that made all my videos start autoplaying?
<iframe src="//www.youtube.com/embed/N2tlvo5CI4Y?autoplay=0"
frameborder="0" allowfullscreen></iframe>
I hear it's the GoogleCast extension.
Disable it
Close Chrome
Run Chrome
Should be fixed for now.
I have made this countdown on this website:
http://www.timeanddate.com/clocks/freecountdown.html
They gave me the iframe link to put it on my website, it is perfect as can be, only thing that is high unprofessional is for it to hyperlink to their free generator, the code is iframe, i'm not an expert on that and from what I've read you can't convert it to html, but how do I go about this? This is the code for the countdown script I made:
<iframe src="http://free.timeanddate.com/countdown/i38wb1iy/n240/cf12/cm0/cu4/ct0/cs0/ca0/cr0/ss0/cac000/cpc000/pcfff/tcfff/fs100/szw320/szh135/tatTime%20left%20to%20Event%20in/tac000/tptTime%20since%20Event%20started%20in/tpc000/mac000/mpc000/iso2012-08-20T00:00:00" frameborder="0" width="175" height="66"></iframe>
The source of the iframe code links to this page:
http://free.timeanddate.com/countdown/i38wb1iy/n240/cf12/cm0/cu4/ct0/cs0/ca0/cr0/ss0/cac000/cpc000/pcfff/tcfff/fs100/szw320/szh135/tatTime%20left%20to%20Event%20in/tac000/tptTime%20since%20Event%20started%20in/tpc000/mac000/mpc000/iso2012-08-20T00:00:00
which shows the countdown, but I still can't seem to find a way to take away the hyperlink or use the code in my own way for that matter.
If anyone could help me out and tell me how to work with this iframe script or be able to create an exact same countdown, as it shouldn't be that hard(it looks pretty simple), it would be highly appreciated!
The idea of iframe is 'a webpage inside a webpage'. So if you use the iframe you actually embed the third-party code. Besides - trying to remove a link would probably violate their terms of use.
Creating your own countdown in javascript wouldn't be difficult and can be a good exercise for a novice coder. Please look at Date reference:
http://www.w3schools.com/js/js_obj_date.asp
Note, that if you substract two dates, you get miliseconds delta of these dates. Using the modulo and division operators you can convert it into years/months/days. Then use e.g. jQuery methods:
http://api.jquery.com/category/manipulation/
to perform substitution on your page.
It's very simple. Select the full iframe through dream Weaver and down you can add your index page link, so that if anyone clicks on the timer from your home page, it will not divert. You will remain in your home page.
add the following css
iframe{
pointer-events: none;
}
if this doesn't work then try adding class or id in iframe tag.