When I embed Youtube video on a page and test it locally nothing happens or the browser even locks up, depending on the browser. Publish the page, test online and it works fine. Obviously not an ideal develop/test scenario. I'm using the iframe embed code from Youtube.
It sure seems like a cross domain security issue but I see no errors using Firebug and haven't found any reference to that nor anyone with a similar problem. Probably just missing something but I'm stumped. I don't like being stumped... for long.
Example that works online but not locally even if this is the only code in the body:
<iframe width="640" height="360" src="//www.youtube.com/embed/INg83kArY4g?rel=0" frameborder="0" allowfullscreen></iframe>
BTW, no problem embedding and playing the same video locally when hosted on my own web server (not locally). Any help would be appreciated.
The reason that file will not load locally is because you are using a protocol relative URL when defining the src attribute.
When the browser parses the src it will prepend the scheme(http: or https:) that the page is viewed in. If the page is being viewed locally, your browser will prepend file to the URL and that will result in an invalid URL.
You can remedy the issue by inserting a scheme on the src e.g.
src="http://www.youtube.com/embed/INg83kArY4g?rel=0"
or by serving up that page on a local server.
Reference
Paul Irish
Try adding 'http:' to the beginning of the src attribute:
<iframe width="640" height="360" src="http://www.youtube.com/embed/INg83kArY4g?rel=0" frameborder="0" allowfullscreen></iframe>
Related
I got an issue, I am not able to solve with all topics on stackoverflow and github.
I am placing certain Videos via Iframe into my page. Whatever I do, the Fullscreen-Button is greyed out. By clicking, I get the message "Fullscreen not available". Same happens with Vimeo Vids, where the Fullscreen button doesnt appear. Same happens on IOS, Mozilla, Android & Chrome.
I tried to solve it via all the commands, I found here. "allowfullscreen", "allowFullScreen", "allowFullScreen="True"" allowFullScreen='true' mozallowfullscreen webkitallowfullscreen allowFullScreen, ...
It seems, that my page itself prevents the fullscreen-mode. If I put my Iframe into clean HTML5-sheets outside my wordpress page, everything works perfectly.
My iframe:
<div class='youtube-container-100' allowFullScreen='true' mozallowfullscreen webkitallowfullscreen allowFullScreen>
<iframe src='https://www.youtube.com/embed/-mzrMWL5sYQ?rel=0&modestbranding=1' allowfullscreen></iframe></div>
Putting the iframe without the div doesnt change anything.
I created a testpage: https://my-sushiparty.de/testseite/
Thank you so much :-)
I tried to solve it via all the commands, I found here. "allowfullscreen", "allowFullScreen", "allowFullScreen="True"" allowFullScreen='true' mozallowfullscreen webkitallowfullscreen allowFullScreen, ...
It seems, that my page itself prevents the fullscreen-mode. If I put my Iframe into clean HTML5-sheets outside my wordpress page, everything works perfectly.
YouTube can disable fullscreen view on embedded videos. The "allowFullScreen" command used to work, but it was probably fixed recently.
I've also tried looking for a script that could re-enable the feature, but unfortunately it seems that the latest patch doesn't have a current workaround.
While trying to embed html5 <video> tag in my salesforce web Page, I came across a wonderful library called "Videojs" (http://videojs.com/getting-started/). It served most of the purpose, however when I tried to play a video on Ipad, it failed. Then I came across this link (VideoJS: not working on IOS), which says to try to use videojs's default movie as there possibly could be encoding issue. When I did as per the suggestion, I came with a very interesting scenario. As When I fed the url(http://vjs.zencdn.net/v/oceans.mp4) directly as:
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
it worked fine both in windows and in ios. But when I downloaded the same video and saved it to Salesforce CRM Content libraries and gave the src path as:
<source src="/sfc/servlet.shepherd/version/download/id" type="video/mp4" />
it worked in windows desktop browsers but not on ipad(version 9.2). I couldn't understand the issue.
Thanks for any help/ideas/suggestions.
I am googling mostly encoding issue for mp4 file or hugesize file,so use handbreak (https://handbrake.fr/). solve the problem
I have tried everything I possibly could, but I was not able to solve this. I am trying to display an mp4 video using an HTML5 video element in IE9 and IE10. In IE9 I get a blank square where the video is supposed to show and in IE10 it says "Invalid Source". It plays fine in Chrome.
The video displays fine within a simple HTML file, but not in my ASP.net MVC project, whether run locally or on a web server. I have the file placed in my root folder (same folder as the web.config)
Here is my code in my ASP.NET MVC index.cshtml:
<video controls style="position:inherit" >
<source src="ExplainerVideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>
Any ideas?
Thanks.
Try taking away the codec and letting the browser decide for itself whether it can play it or not.
e.g. <source src="ExplainerVideo.mp4" type='video/mp4' />
Failing that, try an absolute URL for the video as I've noticed this causing issues on IE before.
I am trying load a YouTube video into a HTML 5 tag.
The problem I am having is I do not know what the “src” property should be. Using the URL for a video on YouTube does not seem to work, that URL seems to retrieve an entire page rather than just a video file.
I have been able to copy and paste YouTube’s own tag (by viewing the page source), that they use on their pages, but this is not a very efficient or long term solution. Is there a better solution?
I have tried to use YouTube’s API, but no matter what I do, it seems always to pull in the flash player version of the player (which of course won’t work for iOS.) Am I missing something obvious here?
This blog post might help: http://apiblog.youtube.com/2010/07/new-way-to-embed-youtube-videos.html
The suggestion is to use this code:
<iframe class="youtube-player" type="text/html" width="640" height="385"
src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0">
</iframe>
The iframe will autodetect HTML5 capabilities and use them; if not, it uses Flash as fallback.
In rails is there anything available that if a user uploads a document to me through paperclip (like maybe a .doc or .pdf or .odf, etc.) That i can embed there document into my page (Like perhaps is there some sort of gem available to handle that
I found a solution to the pdf part of my problem.
theres a simple html line that solves this
<iframe src="thispdf.pdf" style="width:718px; height:700px;" frameborder="0"></iframe>
I've tried the same with .odt, but this just downloads the file (maybe this was more of an html problem than rails) -- note i only tested this in chrome
By embed do you mean display? There's no native way to display any of those documents in html, so you will have to either somehow convert them to html or use another layer, like flash or a third-party tool, to do the embedding for you.
Maybe one of the embed.ly providers can give a nice display for your documents.
I used the following code to make mine work in the view (with the example object #person) using the most current (as of 2013) Google Docs embedded pdf code specifications:
<iframe src="https://docs.google.com/viewer?url=http://www.mysite.com/<%= #person.pdf.url %>&embedded=true"
width="100%" height="800" frameborder="0" >
<p>Your browser does not support iframes.</p>
</iframe>