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.
Related
I have given a source in a Iframe tag, my is issue is that when the page loads on IE the download begins automatically and it generally happens on IE installed on windows 8.
<div> <iframe src="../../Images/Sample.pdf" width="800px" height="800px" ></iframe> </div>
It's downloaded probably because there is not Adobe Reader plug-in
installed. In this case IE (it doesn't matter which version) doesn't
know how to render it and it'll simply download file (Chrome, for
example, has its own embedded PDF renderer).
That said. is not best way to display a PDF (do not forget
compatibility with mobile browsers, for example Safari). Some browsers
will always open that file inside an external application (or in
another browser window). Best and most compatible way I found is a
little bit tricky but works on all browsers I tried (even pretty
outdated):
Keep your but do not display a PDF inside it, it'll be filled
with an HTML page that consists of an tag. Create an HTML
wrapping page for your PDF, it should look like this:
<html>
<body>
<object data="your_url_to_pdf" type="application/pdf">
<embed src="your_url_to_pdf" type="application/pdf" />
</object>
</body>
</html>
Of course you still need the appropriate plug-in installed in the
browser. Also take a look to this post if you need to support Safari
on mobile devices.
1st. Why nesting inside ? You'll find answer here on
SO. Instead of nested tag you may even provide a custom
message for your users (or a built-in viewer, see next paragraph).
2nd. Why an HTML page? So you can provide a fallback if PDF viewer
isn't supported. Internal viewer, plain HTML error messages/options
and so on...
It's tricky to check PDF support so you may provide an alternate
viewer for your customers, take a look to PDF.JS project, it's pretty
good but rendering quality - for desktop browsers - isn't as good as a
native PDF renderer (I didn't see any difference in mobile browsers
because of screen size, I suppose).
See also: HTML embedded PDF iframe
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>
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>
I have to design a web app where if you paste the link of particular video page from any video sharing site like "Youtube", "Metacafe" etc it should embed that video in the page. In simple words, what I was asked to do is that I have to embed a video from any site in my page.
Thanx in advance. :)
You can study the embed codes generated by YouTube and MetaCafe etc~ and then code something to mimic how they do it~
It seems like the better solution would be to allow people to paste the embed code generated by the site itself though. Since the hosters' conventions change.
You could Try this:
<iframe height="500" width="500" scr="http://www.youtube.com/embed/videoidentificationnumber/"></iframe>
Dont do this:
<object scr="http://www.youtube.com/embed/videoidentificationnumber"></object>
You will need to make sure that when you click the submit button it gets the identification number from the end and putting it in the bit specified by videoidentificationnumber (I dont know how though).
I want to have a web page coded with HTML5, and I want to be able to put a pdf file onto this page so you can view it without having to click on any links to download it separately. Anyone know how to do this?
I want it to keep the text, images, and layout of the pdf file also. If that weren't the case I would just use an image. Thanks!
Edit: This will be hopefully going onto the ipad. So it won't support adobe. I need to just find a way to somehow make the pdf file show up in an html5 page without using a viewer. I want to keep all of its layers. It doesn't have to stay a pdf file when its on the page, I just need to find a way to transfer all of those layers there without having to do this manually with divs for each image, paragraph, etc.
I don't think this is possible without using Flash. Instead, you might want to convert the PDF to a different format (HTML for example) that can be rendered by the browser. There are tools that can do this from the command line, so making a script to do it on your site won't be too difficult.
You can use the embed tag like this:
<embed src="/path/to/your/file.pdf" />
Maybe you could convert the pdf to images on the server and display the images instead of the original pdf. As far as i know, Apache pdfbox can be used to do such a convert.
A little bit late and maybe issuu is gonna fix it soon but for now you can embed with issuu.com using an iframe and your magazine address ending in ?mode=mobile. Tested in ipad:
<iframe width="850px" height="580px" src="http://www.issuu.com/your_username/docs/your_magazine_name?mode=mobile" frameborder="0" allowfullscreen></iframe>
I would like same mobile version loading in desktop so there is no advertising. If you know how to make the browser to think it's an ipad let me know.
This code would directly embed a pdf viewer in a webpage
<object data="path to pdf " type="application/pdf" width="100" height="100">
<p>Alternative text - include a link to the PDF!</p>
</object>
If you are using ASP.NET, this link may be of interest to you.
Browser Based PDF Viewing And Editing
Hosted entirely on your server,
activePDF Portal is an ASP.NET
WebControl that enables your users to
interactively view and modify PDF
documents from any source - adding
comments, form fields, bookmarks, and
more – directly from within a standard
web browser, without requiring any
client-side software such as Adobe
Reader or Flash, or the use of ActiveX
controls.
- http://portal.activepdf.com/
PDFObject looks promising, but it doesn't work on iPads at the moment.