CODEWITHSUNDEEP
javascripthtmlembed
Repox
Repox

Reputation: 15476

Embedding JavaScript? Or maybe some other technology is used?

Firstly, I'd like to show you a piece of code. The code is a simple (old style) of embedding a YouTube movie to your website:

<object width="560" height="315">
    <param name="movie" value="http://www.youtube.com/v/-pGYHDcQDwA?version=3&amp;hl=da_DK"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/-pGYHDcQDwA?version=3&amp;hl=da_DK" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>

It's pretty simple and works.

My current solution

I also have a video player, which allows for embedding also. The embed code is basically the same:

<object width="387" height="316" align="top">
    <param name="movie" value="http://example.com/embedplayer.swf"></param>
    <param name="salign" value="lt" /></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <param name="wmode" value="transparent"></param>
    <embed src="http://example.com/embedplayer.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="transparent" salign="lt" width="387" height="316"></embed>
</object>

My Issue

I'd like to allow the viewer to see my videos on an iPad or iPhone.
File formats isn't the problem, as the vidoes has been encoded to several needed formats.

What I'd like is to have similar functionality as the YouTube embed code. When viewing a page with the YouTube embed code on a iPad/iPhone, something else appears (my guess is an image with a link to the correct file format).

When viewing my own embed code on an iPad/iPhone, this obviously doesn't work as I link directly to a SWF file.

What have I tried?

Trying to find out how and what the YouTube embed/object serves, I've simply tried doing some simple GET requests to the YouTube URL specified in the embed code ( http://www.youtube.com/v/-pGYHDcQDwA?version=3&hl=da_DK ) and this has given my mostly 404's (because of bad headers) or a new HTML source with a new Flash object.
In other words, I wasn't able to manually reproduce what is served for the iPad/iPhone.

A possible/alternative solution

YouTube also allows for a new method of embedding.
It looks like this:

<iframe width="560" height="315" src="http://www.youtube.com/embed/-pGYHDcQDwA" frameborder="0" allowfullscreen></iframe>

This is pretty transparent to me. Embedding another page in the iframe allows the external page to do the checks which allows serving the right content to the client (HTML5, Flash or something else). No big deal.

The questions

  1. How does this work for YouTube's old embed code? Using embed/object tags for me, should embed some sort of specified object, but it seems that YouTube's embed code allows for different content in the embed/object elements.
  2. Would the new (alternative solution) be a better way to do this? It seems flexible and allows for future easy maintanence. But I always hear that iframes is a no-no.

Upvotes: 2

Views: 594

Answers (2)

Repox
Repox

Reputation: 15476

It seems that I was looking in the wrong direction.

Question one:
Testing other video sites with embed codes on the iPhone/iPad gave me the result I expected - a blank area.

It seems that, through Content Negotiation, the device browser is able to replace the object/embed tags with the elements needed for starting the YouTube application on the device.

This implies that I cannot create a similar solution, which means I have to either create/use a HTML5 Video player or use the alternative solution with an iframe (I could combine the two).

This makes answering the second question redundant as I have no other alternatives.

Upvotes: 0

gview
gview

Reputation: 15381

They are using serverside scripts that do agent detection and serve up different content depending on what user agent they detect.

Upvotes: 1

Related Questions