Using html5 video tag with youtube embed links?

Report · Jun 23, 2014

Hi all,

I am trying to get a youtube video embedded on a personal site page and the other person does not like the random thumbnail choices (POSTERS) youtube gave us.

I still wanted the video to come from youtube but be able to control the poster thumbnail.

So, I thought to try the htnl5 video tag, but I could not get it working with a youtube link.

Q: Is there a way to get this demo working?

<source src="//www.youtube.com/embed/EtoJ7fQBRF8" type="video/mp4"> ????? how do I get youtube link playing here?

NOTE: If you see this, you're using an

outdated browser that doesn't support

the video tag. </video>

Report · Jun 23, 2014

also I tried this iframe...

Q: Is there a way to add a poster (thumbnail ) to this? that would also work

width="640"

height="385"

src="http://www.youtube.com/embed/EtoJ7fQBRF8"

frameborder="0">

</iframe>

Report · Jun 23, 2014

I found this on GitHub, however I've never tried it.

Very simple method to add custom poster frame to youtube video without using youtube API.This code i...

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jun 23, 2014

Thanks Noncy O.

I tried putting that page together - but I was expecting that clicking on the image would play the video - but nothing happens - any idea why not?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Document</title>

.video { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; }

.video img { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; cursor: pointer; }

.video:after { content: ""; position: absolute; display: block;

background: url(play-button.png) no-repeat 0 0;

top: 45%; left: 45%; width: 46px; height: 36px; z-index: 30; cursor: pointer; }

.video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* image poster clicked, player class added using js */

.video.player img { display: none; }

.video.player:after { display: none; }

</style>

$(function() {

var videos = $(".video");

videos.on("click", function(){

var elm = $(this),

conts = elm.contents(),

le = conts.length,

ifr = null;

for(var i = 0; i<le; i++){

if(conts.nodeType == 8) ifr = conts.textContent;

}

elm.addClass("player").html(ifr);

elm.off("click");

});

</script>

</head>

<body>

</div>

</body>

</html>

Using html5 video tag with youtube embed links?

Photos