Skip to main content
R
revdave
Inspiring
June 23, 2014
Question

Using html5 video tag with youtube embed links?

  • June 23, 2014
  • 2 replies
  • 16930 views

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?

<video width="500" height="325" poster="Your_poster_image.jpg" controls>

<!--these are legitimate 6 sec, sample videos for testing purposes.-->

<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>

    This topic has been closed for replies.

    2 replies

    Nancy OShea
    Nancy OShea
    Community Expert
    June 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 is also valid in brow…

    Nancy O.

    Nancy O'Shea— Product User & Community Expert
    R
    revdaveAuthor
    Inspiring
    June 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">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>Untitled Document</title>

    <style type="text/css">

    .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>

    <script>

    $(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 class="video">

    <img src="mypic.png">

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

    </div>

    </body>

    </html>

    R
    revdaveAuthor
    Inspiring
    June 23, 2014

    also I tried this iframe...

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

    <iframe type="text/html"

        width="640"

        height="385"

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

        frameborder="0">

    </iframe>

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices