I'm trying to put an embedded player inside a data url (to paste in the browser url bar) but every time it gets to the ads part the request gets a 400 error (Bad request). I just copied the code from this link, minified it and changed the video id to one with ads:
https://developers.google.com/youtube/iframe_api_reference
data:text/html, <!DOCTYPE html><html> <body> <div id="player"></div><script>var tag=document.createElement("script");tag.src="https://www.youtube.com/iframe_api";var player,firstScriptTag=document.getElementsByTagName("script")[0];function onYouTubeIframeAPIReady(){player=new YT.Player("player",{height:"390",width:"640",videoId:"LnFsp6iM5dg",events:{onReady:onPlayerReady,onStateChange:onPlayerStateChange}})}function onPlayerReady(e){e.target.playVideo()}firstScriptTag.parentNode.insertBefore(tag,firstScriptTag);var done=!1;function onPlayerStateChange(e){e.data!=YT.PlayerState.PLAYING||done||(setTimeout(stopVideo,6e3),done=!0)}function stopVideo(){player.stopVideo()}</script> </body></html>
When running it on a node server I also get these errors, so I can't get it to play ads either:
http://jsfiddle.net/7gyxgaqj/1/
What can I do? Am I doing anything wrong? Thank you in advance.
Related
I am using Firebase Dynamic Links REST API to generate short links.
If I paste that link into the browser it redirects and loads the appropriate image. But when I use the same link to load image in <img> tag in my webpage it fails.
I created a sample(codesandbox link below) trying to load the same image. I put two image tags, one with bit.ly shortener and one generated with the firebase dynamic links generator. The bit.ly link loads fine.
Sample codesandbox : https://codesandbox.io/s/using-img-tag-forked-ufnd31?file=/index.html
Sample short link for a image : https://files.flux.chat/vs4fy3cY7s1aMnS57
Create dynamic link payload
URL : https://firebasedynamiclinks.googleapis.com/v1/shortLinks?key=WEB_API_KEY
BODY : {
"dynamicLinkInfo": {
"domainUriPrefix": "https://files.flux.chat",
"link": "https://firebasestorage.googleapis.com/v0/b/fluxchathq.appspot.com/o/business%2F5Nmu0449tlNVWVdOpo8h%2Fincoming%2FNA?generation=1654498929454543&alt=media&token=664c135f-48f3-4de8-8ba7-d75ca3a5362f",
"navigationInfo": {
"enableForcedRedirect": true
}
},
"suffix": {
"option": "UNGUESSABLE"
}
}
HTML code
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div>
<img class="image" src="https://files.flux.chat/vs4fy3cY7s1aMnS57" />
<img class="image" src="https://bitly/3Lr8Bq1" />
</div>
</body>
</html>
I don't have any experience with this, but I think shortened urls won't work as an image source-- they don't point to an image directly, they redirect to an image.
Here's an old answer that seems relevant: https://stackoverflow.com/a/27062627/954986
That is not possible unless you own the domain where you want the shortened URL. For example, to do that, you would need to own (or have access to) the website bit.ly.
bit.ly is not hosting your video or your image, it only redirects them to the real URL when you click on the link.
[...]
You will see that your image is NOT in the code. It only redirects to the page that DOES contain your image.
Perhaps you could make an XHR request in javascript, and see if it returns a 3** status with some other location, and use that as the source for the image? (edit: the short link doesn't have CORS enabled, so this probably won't work)
I just tested with curl (well, httpie which is far superior), and the sample shortlink you provided gives a 302, with the Location response header being the actual image.
edit: I tested your sandbox, and the flux.chat image source shows a GET request resulting in a 403 Forbidden status code in the browser console. Maybe it's because it's being called from localhost? But firebase sees something about the request it doesn't like (maybe origin being localhost, maybe it being in an image source, maybe ..?) and that's preventing it from loading.
Sorry I don't have anything more concrete for you, definitely a strange issue.
My site is using Angular 10 (With server side rendering). I referred to https://angular.io/guide/universal to convert the site into SSR. Everything is working fine. 'View Source' shows me the content, I can share with Social Media. My node server does not give me any error.
The only issue I am facing is - When it is rendered through the node server, it shows as HTML string. For few seconds user sees below:
<!DOCTYPE html> <html> <head> </head> <body> <h3>Step 1 - Add environment variable </h3> <p> ......</p> </body> </html>
Later it switches back to properly formatted HTML. The same is the case with material icons used on site. I see them as strings initially.
Please check out the link https://ecokrypt.com/dashboard/article/detail/5e59df2b00190207e65d9e99/4.3---Angular%253A-Consider-Different-Environments
Slow network throttling shows the issue clearly. This is giving a very bad end-user experience. Am I missing any step in SSR? How can I handle this? I tried to search this issue on google, but no luck.
I have a page where I have an iframe using the following code.
<iframe name="SL" src="https://sl.se/sv/" width="100%" height="870px"></iframe>
It has been working without any problems, but yesterday it became a blank page in the iframe. I haven't updated anything in the page so it must be something in the iframe src that is blocking for some reason. Is there another way to get this page to show inside like an iframe, but with some other code?
If you see the console of your browser, it says:
Refused to display 'https://sl.se/sv/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
which means that they have disallowed loading of the resource in an iframe outside of their domain. For more information take a look at this.
How do I investigate a "style sheet could not be loaded" message in Firefox? This message appears as a red bar below the page contents and above the developer tools. How do I find out what file the browser is referring to? I'm running version 46.0 on Linux Mint 17.3.
Update
If I look at the console of the developer's tools in Firefox, it shows all the css files and says "HTTP/1.1 200 OK" against each file.
Another Update
This error bar comes and goes, it is not consistent for a particular page.
This may be a very specific edge case, but I had this exact same error with no indication as to which style sheet Firefox was complaining about. It turns out that it was the Ad Blocker that I was using. When I disabled the ad blocker and reloaded my page, the error went away.
This happens almost always when CSS is gziped, but server returns Content-Length of not compressed resource. Seen this happen when using mod_deflate with mod_fastcgi. This is server side bug, not firefox.
Update Notice:
Firebug is out of date, instead of firebug you want to be using Firefox Developer Edition which has Firebug-type diagnostics and tools built in.
Get Firebug, or otherwise view the page source code (right click on it on Firefox and choose View Source) and click through on each .css stylesheet as referenced in the <head> section of the HTML page. One or more of these will return an Error 404 or some other error.
Each CSS sheet is in a <link> element in the Head of the HTML.
Example:
viewing the source code to this page will give a pile of code, in the <head> section is the <link>:
<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/QAPage">
<head>
...
<link rel="stylesheet" type="text/css" href="//cdn.sstatic.net/Sites/stackoverflow/all.css?v=8c7d44a438e6">
...
</head>
This shows that there is a style sheet in the link element, and for your page/site if you click through all of these (there may be multiple ones) and find the one that gives you the specific error.
UPDATE:
(Update) if I look at the console of the developer's tools in Firefox, it shows all the css files and says "HTTP/1.1 200 OK" against each file.
Therefore you should be looking in each of your CSS and related documents to see which document is linking out to an unreachable resource.
Another reason for style sheet could not be loaded is "active mixed content" in combination with HTTPS. I.e. if your HTML code is loaded over HTTPS, but references a CSS that is delivered over HTTP, Firefox will block the CSS file. The blocking will cause an explanatory entry in the Web console. See https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content/How_to_fix_website_with_mixed_content for more information.
The blocking will also happen if the request for the CSS file is answered via HTTPS with a redirect and the redirect URL uses HTTP. And Google Chromium will also block active mixed content over HTTP and make an entry in its Javascript console.
I had this error from this stackexchange page, got the red line in firebug console. It pointed to the link https://cdn.sstatic.net/Sites/stackoverflow/all.css?v=743e70f26396 so I checked the page source copy/pasted the link into a new tab and hit enter. Firefox screamed Security issue certificate error, So I just added an exception and the CSS loads. This error did not appear in Chrome or IE.
Easy fix.
I'm attempting to add a LinkedIn Share button to our content-driven website. I've generated the embed code using the button builder, but whenever I try to actually use the button, I get a generic error:
There was a problem performing this action, please try again later.
It's been doing this for several days (since I first added the code), so I don't know if the error is on the LinkedIn side or mine. Is there any way to get a more specific error message? The code they provide is just a script tag that you paste in:
<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share"></script>
Unfortunately LinkedIn's "support" forums are limited to the various API's; there's nowhere available to submit a question regarding the build-a-button functionality. I'm hoping someone else has used this function and can point me in the right direction.
Most likely the page you are trying to share is not web accessible (local, under htaccess password or something). It looks to me like LinkedIn tries to actually look at the page you are sharing, and if it can't reach it, it gives you this message.
Most likely the url which you are sharing is not encoded, try encoding that, also follow this article for more.
The easiest way to ensure the linkedin share button works properly, is to use
<!DOCTYPE html>
instead of other alternatives.
look at the data-url attrbute. Remove the "http://" and only use "www." for your website url. That fixed my issue at least.
I found this way for validate in xhtml:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
< script src="http://platform.linkedin.com/in.js" type="text/javascript">< /script>
< div id="linkedin">< /div>
< script type="text/javascript">
var po2 = document.createElement('script');
po2.type = 'IN/MemberProfile';
po2.setAttribute("data-id","http://www.linkedin.com/pub/luca-di-lenardo/11/4b7/3b8");
po2.setAttribute("data-format","hover");
po2.setAttribute("data-text","Luca Di Lenardo");
document.getElementById("linkedin").appendChild(po2);
< /script>
Remove the white space and it works!
If anyone is getting this error, and cannot figure out why, I recommend checking the URL of the page you're sharing with: LinkedIn Post Inspector.
So, for instance, if I were to check out how wikipedia.org looks when shared, I would visit and enter that URL, like so...
https://www.linkedin.com/post-inspector/inspect/https:%2F%2Fwww.wikipedia.org%2F
And I see...
But there's a ton of information here, showing how everything is parsed, from the description to the title to the image selection for thumbnail display...
Warning: Add an og:image tag to the page to have control over the content's image on LinkedIn.
Title: Wikipedia
Type: Article
Image: No image found
Description: Wikipedia is a free online encyclopedia, created and edited by volunteers around the world and hosted by the Wikimedia Foundation.
Author: No author found
Publish date: 6/1/2020, 6:39:59 AM
They even give you instructions on how to fix your page! Hey, got some advice for Wikipedia.org here!
Provide a metadata tag for the og:image in the page's head section. For example:
<meta name="image" property="og:image" content="[Image URL here]">