I am developing a webpage for a client, and they want to have their Facebook feed in a sidebar. I was happy to find out that it is very easy to embed a Facebook feed, but was unhappy to see that it doesn't seem to work.
After really scratching my head on the issue, I decided "hey, maybe it just isn't working in Firefox", so I factored down to the least common denominator and fired up IE - sure enough, it shows up with no issue in IE. Here is a screenshot of the difference:
http://i.imgur.com/WQ9br1A.png
To make matters a little more strange, this isn't a universal issue in Firefox for me. iframes are showing up great everywhere else. The W3Schools test page, for instance, shows up fine... unless I'm using the Facebook code. For those unfamiliar with it, Facebook provides automatically generated code for feed embeds, and it is as follows:
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ffacebook&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
I suspect since this is the only frame that is giving me issues, there's something wrong with Facebook's code, but it strikes me as odd that a web giant such as Facebook would provide developers with faulty code that was untested on a popular web browser.
Is there something wrong with Facebook's code? My Firefox? Help much appreciated.
Related
I can't seem to embed anything on my website. At first I thought it was just the YouTube embed but then I tested another webpage and it didn't work either. The errors I get seem to change at random. You can see all the different errors if you open the inspect panel.
Screenshot
https://blendertimer.com
Here's the code for the embed. (though I've tried multiple different code variations, none of which worked)
<iframe style="aspect-ratio: 16 / 9" width="100%" src="https://www.youtube.com/embed/jxU3c0Gjboo" id="latest-video-video"></iframe>
Any ideas?
I've done some looking around, but can't seem to find a solution to this problem.
For Youtube, you need to log-in to your account then watch a video.
Click on share and select embed.
You will then have the right code for your iframe.
Just paste the code in your html.
For some videos you must click on "watch on Youtube".
So basically I recently made a video for a assignment and I copied the embedded code from You tube and pasted it in Brackets.io and after I clicked save and then pressed live preview it didn't work and when I went to the website that shows you the many reasons why live preview won't work one of those reasons was
"Bug #7935: Live CSS does not update if page contains an iframe (including injected iframes such as ads or social media buttons)."
So how do I fix this?
If Anyone knows please reply back to me!
I suppose you use for embedding a video a kind of code like this:
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
I usually use this for holding videos in my webs, so if this still gives you problems, you should use another editor, maybe Visual Studio Code and install an extension call Live Server by Ritwick Dey, which does the same as Bracket's Live Preview.
I am displaying an in-line PDF with the following code:
<object data="document.pdf" type="application/pdf" height="400px" width="600px"></object>
For most, this renders fine.
I have a user who is using Firefox version 45 who is getting an error saying "Plugin needed to display this content" - see below image:
I am just now starting to use PDFs with HTML so not completely familiar with this - and am only using it for specific purposes and when I need to do it.
Obviously I need it to display properly in all browsers and any help on how I can prevent this from happening would be appreciated.
I took a look at your issue and did some snooping in a bunch of forums and even in the Mozilla help section itself.
As best as I can tell, as of at least 9 months ago according to a couple of the forums I saw, there is no fix for that bug with Firefox 45.
That said, there is a bit of a work-around that you could do to allow visitors to still have access to that PDF. I will give you some code to try and then I will provide an explanation. Here goes...
<object data="document.pdf" type="application/pdf" height="400px"
width="600px">
<p>This browser does not support PDFs. Please download the PDF to view
it: Download PDF.</p>
</object>
So basically what is going on is you have to provide a "fall-back" for the visitor to go to so they can download the pdf to look at it. There are other tags you can use, like the embed tag and I believe iframe tag, but the object tag is the only option that allows you to provide a fall-back for your visitors if their browser doesn't support something.
By the way, it is weird if there truly isn't a plugin for Firefox 45, because the tag has been supported in browsers for the longest time!
Anyway, I hope that helps and please post your results. :)
Oh one more thing! Here is a link to a website that has been useful to me. You can use it to see which browsers support a particular thing or not. The site is:
http://caniuse.com/
So I'm doing some work on a site to make it compatible for IE8 (Client request, don't ask). Now the website contains some videos in iframe tags which are displaying blank in IE8.
According to Blank iFrame in IE I have to write 'position:relative' in order to show the video. Below is my full tag:
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/whatever" frameborder="0" style="position:relative;" ></iframe>
This however, doesnt seem to work. Even with position:relative it still shows as blank.
The above 'Blank iFrame in IE' question is a number of years old so I'm wondering has there been any changes sinse HTML5 in how this should operate? Or should the code still work and I'm doing it wrong?
Now my IE8 working well after figure this out.. Firstly i have an experience like you do such as blank content.
So here the few step to fix this.
Try installing shockwave player.
After that on menu setting click tools > manage add ons
and enable it the shockwave flash object
Let me know the result. Regards.
I have a weird problem with firefox only.
To put it simply, I have an html (jsp) page with a <video> tag in it.
If I monitor how the page is loading with firebug, I can see that, at the end of the loading, a request is made to the "base href" of my page.
I have a base href tag like this : <base href="http://localhost:8080/CHU/" /> and the call is "GET /CHU/" (see screenshot below)
I can see the video being loaded and be ready to play before that bogus call happens!
If I remove everything in the video tag, like this :<video></video> the bogus call still happens.
For some reason this call will update the session and mess up with other stuff. So I have to prevent that to happen.
Any ideas?
Regards,
Michel
PS: works fine with chrome and IE
I have a site that shows a very similar behaviour. I use jwplayer 6.5, Ff 22 and disabled the flash add in. A video tag is created, then an error is thrown. A trace on the net shows a call to the root of the site (base). It looks as if the video play were attempted with an empty source. The longtail guys claim it's not their script causing this, and I tend to believe them. It's only their handler that catches the error. So I believe I indeed seeing the same symptom. Funny thing is: it only happens if the page was generated by Typo3. A static copy of the site with the same scripts does not show this. Tricky. If I find anything, I'll let you know. Might solve your issue as well.
If have exactly the same problem using latest firefox, html5-video and base-href.
http://jsfiddle.net/38h8b/6/
<base href="http://jsfiddle.net/38h8b">
<video width="320" height="180" src="http://media.sublimevideo.net/vpa/ms_360p.mp4" autoplay="true"></video>