YouTube iframe, browser looks for file locally - html

I have a problem where I am building some html pages on my local machine and I am trying to embed a youtube video into a page using the provided code:
<iframe width="560" height="315" src="//www.youtube.com/embed/oBjWLXLroWc" frameborder="0" allowfullscreen></iframe>
However when I test the page locally I get file not found C:\desktop\testsite\http://www.youtube.com...., etc
Anyone know why this is happening, I don't believe I have encountered this before.
Browsers used are latest FF and latest Chrome, both show file not found. Have checked all code and nothing seems wrong, I can show local content (same directory) in the iframe no problem. Also tested with other external sites/resources and same issue.
Thanks

Add an http: to the start of your src:
<iframe width="560" height="315" src="http://www.youtube.com/embed/oBjWLXLroWc" frameborder="0" allowfullscreen></iframe>

I assume you are accessing the file via "file://C:/desktop/testsite/index.htm" or something similar?
"...src="//www.youtube."... uses the protocol/scheme in the address/location bar which in this case is "file://...." which would give you the result you are experiencing.
To fix this you need to install some web server software WAMP or IIS depending on if you wish to do server side coding at some point.
PHP - WAMP - http://www.wampserver.com/en/
ASP.NET IIS - http://www.iis.net/
Good luck!

This is probably happening because you are developing locally. Try using WAMP or XAMP to develop. Or upload your changes to your domain and test again. As heems mentioned, you can adjust your code to use the absolute path by including the http:// to your url. Using just // takes you to the base or root of your path. Because the base of your html document is your C: drive, it goes to that to find/build the URL.
This page may help explain it better than I can. - http://en.wikipedia.org/wiki/File_URI_scheme

Related

Embeded Twitch player in a Chrome Extension stopped working?

I've created a "new tab, chrome extension" a while back which is running a React App. One of the feature of this extension is a Twitch player, with the possibility of opening streams using an iFrame to watch the streams. The data and urls are retrived from the open Twitch API. This has worked fine for quite a while, but about a month back it stopped working for some reason.
When I open a stream I get this error message:
Refused to frame 'https://embed.twitch.tv/' because an ancestor
violates the following Content Security Policy directive:
"frame-ancestors https://".
It could be worth noting as well that the player works when I'm just running the React App, so it has something to do with the Chrome Extension.
I did some research about this issue and found that it was some issue with how the parent and referer is specified in the iFrame.
The iFrame look like this and most of it is automatically generated when I build and run the extension.
<iframe src="https://embed.twitch.tv?autoplay=true&channel=<a channel>&height=720px&layout=video-with-chat&muted=false&parent=<id of my chrome extension>&referrer=chrome-extension%3A%2F%<id of my chrome extension>%2Fbuild%2Findex.html&style=%5Bobject%20Object%5D&targetId=twitch-embed&width=1280px" allowfullscreen="" scrolling="no" frameborder="0" allow="autoplay; fullscreen" title="Twitch" sandbox="allow-modals allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox" width="1280px" height="720px"></iframe>
Since I coudn't find anything that helps solve the issue, I figured I try with a new post. Could anyone help me solving the issue?
I asked the same question on the twitch developer forum, and got the answer that this is not supported anymore.
source: https://discuss.dev.twitch.tv/t/twitch-embedded-in-a-chrome-extension/33157
So for anyone coming to this question, this is not possible anymore.

How Do I Fix My YouTube Embedded Code In Brackets So That Live Preview Will Work?

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.

How to add video to doxygen-generated html file

I am creating an html page with doxygen and would like to add video content onto the page. Is this in general possible? I am afraid I am quite new to doxygen and could not find any information on this topic in the doxygen documentation itself.
Any help would be greatly appreciated.
I solved it by using the command \htmlonly, as follows:
\htmlonly
< iframe width="500" height="315" src="https://url-to-embedded-video" frameborder="0" allowfullscreen>
\endhtmlonly
This worked well in the sense that the video was correctly shown embedded onto the web page, but funnily enough some other doxygen commands above the video stopped working.

Embedded soundcloud audio does not work with sandbox in iframes in chrome

Problem:
I have a html file which calls another html file through an iframe with sandbox. The inner file contains iframe given by soundcloud to embed. Now this soundcloud widget does not work.
<!DOCTYPE html>
<html>
<head></head>
<body>
<iframe width= "100%" height="450" src= "inneriframe.html" sandbox></iframe>
</body>
</html>
And the inneriframe.html contains iframe I got from soundcloud.com inneriframe.html is:
<!DOCTYPE html>
<html>
<head></head>
<body>
<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/36700916&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true" ></iframe>
</body>
</html>
Observations:
1. It works for some files and does not work for others.
2. It works on firefox and not on chrome.
3. If we disable flash player from chrome plugins, it works.
Possible reasons:
Perhaps for some files soundcloud first check if flash player is available, run it through flash player else through HTML5. In such cases it finds that flash player is available and hence tries through it but sandbox restricts flash player and hence it does not work.
For other files perhaps soundcloud directly runs through HTML5. Also since chrome implements sandbox most strictly, hence it is a problem in chrome only.
Working embedding:
<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/211417319&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
Non-working embedding:
<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/216846955&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
Kindly help me in:
1. resolving issue, if there is some way.
2. to differentiate files which works and which does not work and why?
Regarding the Chrome/Flash issue, I think what may be happening is you may have some conflicting Flash updates in Chrome. Chrome by default has Flash integrated and each update to Chrome also adds the most recent version of Flash. If you've installed Flash separately, it could also be installed for Chrome, so the two versions might be in conflict with each other. You need to disable one/ the second instance of Flash - that's why disabling the plugin in Chrome works. I would recommend however, that you ensure that your version of Chrome is up to date and/or that you update your flash plugin by doing the following:
In the address bar [of Chrome] type chrome://components, then under "pepper_flash," click 'Check for update'. That may work. So it is not a general issue, it will vary from machine to machine. A pain, i know.
Regarding the some-play some-don't issue, this is a known FF-soundcloud issue. Apparently if you enter Firefox 'Safe mode' all the tracks will play. (you can enter Safe mode by clicking the menu icon, then help and select Restart with Add-ons Disabled then select Start in Safe Mode (don't Refresh Firefox) ).
Hope this helps!
Rachel

Iframe comes back blank in HTML

My iframe comes back blank.
<iframe src="http://www.victradeshall.com/mcauley/76123Ilj71jh/334254jdlIa91iI194L71l872lI1/index.html"/>
I am using Firefox 29.0 and Chrome 35.0. Both of the browser are showing the same result. What is the problem?
I set this up in JSFiddle to check it was working, which it is:
http://jsfiddle.net/0r11e1jg/
<iframe width="420" height="315" src="http://www.victradeshall.com/mcauley/76123Ilj71jh/334254jdlIa91iI194L71l872lI1/index.html"></iframe>
The only difference between your code and mine is that I've added in width and height.
If it's not working then I'd think it is probably a wordpress related issue, and I'd recommend that you take a look at this thread:
https://wordpress.org/support/topic/using-iframe-in-wordpress
It could be that you need to install a plugin - like this one which will allow you to put wordpress in place:
https://wordpress.org/plugins/advanced-iframe/
This thread gives you some other options on the various plugin options:
https://wordpress.org/support/topic/using-iframe-in-wordpress
Hope that helps!