Link from an image to a YouTube video

[roger64]

Hi

A friend of mine would like to insert in a EPUB an image containing a link to a YouTube video. It looks simple to do but, if I understand it correctly, the display of the video would only be possible if the EPUB is written in an EPUB3 format (which allows to display video tags).

I'd like to have a confirmation for this point.

Then, how would someone write the image tag containing such a link to YouTube?

[DomesticExtremis]

Something like:

a.youtube {
/*do not underline the link*/
text-decoration: none;
}

<a class="youtube" href="https://www.youtube.com/watch?v=-14SllPPLxY">
<img alt="image of youtube video" src="./Images/youtubevideo.png" />
</a>

I'm not sure that any level of Epub is guaranteed to support video playback.
In addition, the link may get opened in the ereaders browser (if it has one).

[roger64]

@DomesticExtremis

Thanks for your help!

[odedta]

What DomesticExtremis posted is an image acting as a link, not a embedded video like Youtube allows as you mentioned in the last part of your post.

If you want to have an image as a link that will open the reader's browser and play a YouTube video you can do that simply by doing what DomesticExtremis said. That is supported both in ePub2 and ePub3 versions since it's just a link.

If you want to embed a YouTube video into an ePub you need to go to YouTube and use the embed code as is and you will get an embedded video, please note this will only work in ePub3 version and not all devices support this feature yet.

In addition, you need to add a property in your metadata.opf to that html file. What I mean!?

If you have an html file with the video called outvideo.html for example, this is the code you should insert in order to have an embedded video:

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

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

Can't remember which one works, if both works use the old embed code (<object> tag)

Your changes to the manifest in the metadata.opf:

<item id="outvideo" href="outvideo.xhtml" media-type="application/xhtml+xml" properties="remote-resources" />

[roger64]

@odedta

I am now in totally unknown territory. Thanks very much for your detailed - and very useful - answer.

[JSWolf]

But remember, most ePub renderers won't play that video. No idea if they'll even display correctly where your code for the video is.

[Tex2002ans]

Originally Posted by JSWolf

But remember, most ePub renderers won't play that video.

I second this.

Also, remember that many ADE-based devices have a bug where they can't click a link that encompasses an image:

<a href="http://sample.com/videolink"><img alt="Sample Video Title" src="../Images/samplescreenshot.jpg" /></a>

For maximum compatibility, you would want the image, followed by the text link below that leads directly to the video (I know I know, hideous, but will work on any device). This also allows someone with a non-internet connected device to be able to type in the link manually.

<img alt="Sample Video Title" src="../Images/samplescreenshot.jpg" />

<p><a href="http://sample.com/videolink">http://sample.com/videolink</a></p>

[odedta]

Tex way is better imo, since there is no cursor in touch devices people wouldn't know the image is a link.

[roger64]

Originally Posted by Tex2002ans

For maximum compatibility, you would want the image, followed by the text link below that leads directly to the video (I know I know, hideous, but will work on any device).

[...]

Nothing is hideous if it provides a better compatibility.

Thank you all!

[Tex2002ans]

Originally Posted by roger64

Nothing is hideous if it provides a better compatibility.

I always err on the side of readability/compatibility over looks.

As a side note... am I the only one here who thinks linking to outside resources which can die/be taken down seems like a really bad idea?

Which made me think, it might also be a good idea to add the title of the video somewhere in there too (so someone can do a search on their own, or find it through alternative means). For example, if the Youtube video gets taken down, maybe they can find it on Vimeo, or if Youtube dies, they can still search for the video on "future video site X".

<img alt="Sample Video Title" src="../Images/samplescreenshot.jpg" />

<p><a href="http://sample.com/videolink">Title of Video: http://sample.com/videolink</a></p>

Perhaps this is just the insane archivist side of me talking. (I have a huge problem with URL Shortener/Redirection services as well).

Too many of those sites/services die, and then the links become totally worthless (if you are interested, research "Link Rot").

[mrmikel]

I have a little PRS-300, so such links are utterly useless, since it lacks an internet connection.

I don't know why so much emphasis on epubs, when a web page would do the same thing with more freedom.

You are right about link rot. Google can find the video objectionable for one reason or another, or the person can put up a different cute cat video, etc.

[JSWolf]

Originally Posted by mrmikel

I have a little PRS-300, so such links are utterly useless, since it lacks an internet connection.

I don't know why so much emphasis on epubs, when a web page would do the same thing with more freedom.

You are right about link rot. Google can find the video objectionable for one reason or another, or the person can put up a different cute cat video, etc.

Such links are utterly useless even if you had internet on your 300. Most eInk devices would be awful for trying to play a YouTube video.