I am using iframe tag and adding Spotify playlist url in src, see the example below:
<iframe class="myspotify-iframe" src="https://open.spotify.com/embed/playlist/3p5lcgvL0wxDeu32u3prL1" title="Spotify playlist" frameborder="0" allowtransparency="true" allow="encrypted-media">
</iframe>
above code is working fine in chrome, firefox & safari. But the playlist is not loading in IE11.
Any suggestion how this issue can be fixed ?
That website may no longer be compatible with IE11.
Don't make your websites compatible with IE11, or else you won't be able to use recent web standards without a lot of hacks. IE11 was released in 2013, 7 years before 2020.
I try to check the Spotify official docs to check the browser support.
I come to know by visiting this link that Spotify web player supported by Chrome, Firefox, Edge, Opera, and Safari browser.
So it looks like the IE browser is not supported and this is the reason that your playlist is not loading in the IE browser.
The issue is not related to an iframe. If you directly try to open the page in the IE browser then you can notice that it will show an error in the console.
I suggest trying to use the new MS Edge browser can help you to avoid the issue.
Related
I'm trying to embed a YouTube video:
<iframe width="444" height="250" src="https://www.youtube.com/embed/lN_MSyrq6-U?rel=0" ></iframe>
It works on Chrome; why doesn't it work on Firefox?
I've double-checked that the video is working in the respective region, deleted the allowfullscreen stuff, and checked w3schools for any iframe-related blocking stuff in Firefox.
After lot of help and asked a senior programer to help me .
the answer was the internet connection and/or windows cluttered it happened on
img too. ( they didnt load and the browser didnt said anything)
so it did load but ...
I am trying to create a local HTML/CSS/JS project on my machine using HTML5 Boilerplate template. I am using CSS3 properties like border-radius and it looks good on IE 9. But the property has no effect when testing in IE7 and IE8 using F12 Developer tools.
I was checking http://htmlemailboilerplate.com/ for its behavior on IE7/8 mode. The website seems to work well and supports the border-radius property on IE7/8 mode.
I then went ahead and downloaded http://htmlemailboilerplate.com/, as a complete webpage to my local machine. The local copy when opened in IE7/8 mode does not support the CSS3 border-radius property.
(http://htmlemailboilerplate.com/ website used border-radius property in its behind the nav_elope.png to round off the corners)
Is there something that I don't understand about the difference of running HTML5 boilerplate on a local webpage vs. a website hosted on a server?
How can I make the downloaded page behave exactly as the website behaves in IE7/8 mode?
It appears that you have the Google Chrome Frame (GCF) installed as an IE add-on.
The http://htmlemailboilerplate.com/ site uses the GCF to display HTML5 and CSS3 in IE browsers. It has the following META tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
"chrome=1" means always use GCF if it's available.
GCF doesn't work locally unless you edit your registry. You need to go to:
HKCU\Software\Google\ChromeFrame
and add
AllowUnsafeURLs=1 (DWORD).
You would access the page you saved like this:
gcf:c:/path_to_file/HTML5_Tests/HTML EMAIL BOILERPLATE v 0.5 updated 11_5.htm
You might find this page helpful: Chrome Frame: Developer Guide
The Testing Your Sites section has the info I detailed above.
IE < 9 doesn't support border-radius. See http://caniuse.com/#search=border-radius
update: See http://css3pie.com/. I don't know if this works.
i want to install firebug on IE.can you give me the links for free download of firebug
You could use
firebug lite. That works on IE (6+).
Firebug is firefox addin and you cannot install it on IE. IE Developer tools are the closest you will get to Firebug for IE.
There is something called Firebug Lite which works on IE.
this is the IE developer toolbar link http://www.microsoft.com/downloads/en/details.aspx?FamilyID=95e06cbe-4940-4218-b75d-b8856fced535 as firebug cannot be installed to IE
Firebug is free, but however is not designed for use with IE, it's actually a Firefox addon (Hence the name), if you want to get it for firefox (I highly reccomend this) then you can get it from:
GetFireBug.Com
However, if you want a decent equivelant for use within IE, firebug lite is a script based version you can use on your pages to give you the same inspection capabillities from any browser you choose, more Here
I have an ASP.NET page where I need to figure out where the style for a textbox is coming from. There are several style sheets defined for the page and I want to be able to use some sort of tool / editor that will tell me what styles were used and from what file(s) to render the textbox.
Thank you.
Use Firefox with Firebug and inspect the Text-box. Firebug is the most useful tool to do exactly that.
In IE you can use the IE Developer Toolbar. But I'm a fan of FireBug for FireFox.
From comments: Bernard Chhun recommended FireBug Lite as an alternative to IE Dev Toolbar. It also works for Opera and Safari too.
Most browsers have developer tools (build-in or as extension) that can show you the cascading order of the applied rules.
For Firefox there is the Firebug extension, Safari (WebKit) has Web Inspector, Opera has Dragonfly and for the Internet Explorer there is the Internet Explorer Developer Toolbar.
The web developer toolbar for Firefox has CSS and element inspectors which I find very useful.
You can also modify the CSS in the browser so you can tweak layout without going back to your IDE
I really enjoyed using the Developer Toolbar with IE7, and recently upgraded to IE8 to take advantage of (what appeared to be) more full-featured developer tools.
The IE8 tool is really excellent (finally rivals FireBug), but I can't seem to inspect inside an iframe, which I could with the IE7 toolbar.
I'd prefer not to downgrade to IE7 because I like some of the other features of the IE8 tools, but the ability to inspect inside an iframe is a deal breaker.
Also, firebug is of limited utility to me because our site is an internally-deployed intranet app, which means "browser compatibility" is a very low priority, major functionality is often broken in FireFox.
Here's what the IE8 tools look like around the iframe
In firebug, I can see an <html> element under the iframe, which I can expand just like the rest of the page
The <iframe> in question has its src attribute set server-side (in the ASP.NET code-behind)
UPDATE:
I get the same result on this Iframe example page. If anyone can use the IE8 developer tools to inspect inside that iframe then I'd like to hear about it.
Install the final release of IE8 and you will easily walk through any element including iFrame and other container controls.
Unhelpful answer: it works for me here.
Inside the <iframe> I see an <html> inside of which is the normal content.
(This is RC1 under Win2k8.)
Does FireBug show the iframe having any content? Is the iframe being populated dynamically? If so try JavaScript debugging with a breakpoint on the point at which the iframe is populated.
Answering the question in the comment re. the iframe from http://www.htmlcodetutorial.com/frames/_IFRAME.html:
I see the content document in FireBug
I do not see it in IE8.
The one thing (compared to an internal example here) is that the iframe you pointed to contains default content... but since this is not shown in IE8's dev tools I can only think this is a defect and should be reported to MS.
this seems to be a bug with IE8 developer tools.
remove the <!DOCTYPE from the document referenced by the iframe and you are good to go.