Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Very simple method to add custom poster frame to youtube video without using youtube API. This code is also valid in browsers not supporting window.postMessage (API uses postMessage). The trick is adding the iframe in a comment. Javascript reads comment contents and saves iframe definition to a var. When JQuery (for the sake of brevity, not real…
.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; }
<div class="video">
<img src="poster.jpg">
<!-- <iframe width="940" height="529" src="http://www.youtube.com/embed/rRoy6I4gKWU?autoplay=1" frameborder="0" allowfullscreen></iframe>-->
</div>
$(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[i].nodeType == 8) ifr = conts[i].textContent;
}
elm.addClass("player").html(ifr);
elm.off("click");
});
});
@wesbot

This comment has been minimized.

Show comment
Hide comment
@wesbot

wesbot Jul 31, 2013

This is a handy script, thankyou. I had one issue in IE8 however – nodeTypes are not constants in IE8 as explained here with workaround: http://webbugtrack.blogspot.co.uk/2007/10/bug-256-dom-nodetype-constants-are-not.html

wesbot commented Jul 31, 2013

This is a handy script, thankyou. I had one issue in IE8 however – nodeTypes are not constants in IE8 as explained here with workaround: http://webbugtrack.blogspot.co.uk/2007/10/bug-256-dom-nodetype-constants-are-not.html

@solepixel

This comment has been minimized.

Show comment
Hide comment
@solepixel

solepixel Oct 10, 2014

The problem I had in IE8 was conts[i].textContent returned as undefined. There were a couple of alternatives in IE8, but I went with conts[i].nodeValue. This may help someone else dealing with the same issue.

The problem I had in IE8 was conts[i].textContent returned as undefined. There were a couple of alternatives in IE8, but I went with conts[i].nodeValue. This may help someone else dealing with the same issue.

@thinsoldier

This comment has been minimized.

Show comment
Hide comment
@thinsoldier

thinsoldier Oct 21, 2014

Instead of an html comment you can put the details of the iframe into a data attribute. You'd have to change the JS but it would be simpler,m more reliable jquery instead of counting nodes and inspecting nodeTypes

Instead of an html comment you can put the details of the iframe into a data attribute. You'd have to change the JS but it would be simpler,m more reliable jquery instead of counting nodes and inspecting nodeTypes

@seriema

This comment has been minimized.

Show comment
Hide comment
@seriema

seriema Nov 4, 2014

Is this working for you guys? The youtube-poster-frame.css seems to make things worse. Most swipes result in the video starting as well. Here's my jsFiddle demonstrating this. Any help would be appreciated!

seriema commented Nov 4, 2014

Is this working for you guys? The youtube-poster-frame.css seems to make things worse. Most swipes result in the video starting as well. Here's my jsFiddle demonstrating this. Any help would be appreciated!

@aiphee

This comment has been minimized.

Show comment
Hide comment
@aiphee

aiphee May 12, 2015

I have made some adjustments to it. I want video to be image again when i change slide. Also, giving data atribute instead of comment seems much better to me.

$(function () {
        var videos = $(".YTvideo");

        $('#YTslider').on('afterChange', function () {
            videos.children('iframe').remove();
            videos.removeClass('player');
        });


        videos.on("click", function () {
            var that = $(this);

            setTimeout(function () {
                var YTid = that.data('yt_id');
                that.addClass("player").append('<iframe width="940" height="529" src="http://www.youtube.com/embed/' + YTid + '?autoplay=1" frameborder="0" allowfullscreen></iframe>');
            }, 400);
        });

    });

PS: you can get jpg from youtube video from this url: http://img.youtube.com/vi/0VF8GhZhFos/maxresdefault.jpg

aiphee commented May 12, 2015

I have made some adjustments to it. I want video to be image again when i change slide. Also, giving data atribute instead of comment seems much better to me.

$(function () {
        var videos = $(".YTvideo");

        $('#YTslider').on('afterChange', function () {
            videos.children('iframe').remove();
            videos.removeClass('player');
        });


        videos.on("click", function () {
            var that = $(this);

            setTimeout(function () {
                var YTid = that.data('yt_id');
                that.addClass("player").append('<iframe width="940" height="529" src="http://www.youtube.com/embed/' + YTid + '?autoplay=1" frameborder="0" allowfullscreen></iframe>');
            }, 400);
        });

    });

PS: you can get jpg from youtube video from this url: http://img.youtube.com/vi/0VF8GhZhFos/maxresdefault.jpg

@anditra

This comment has been minimized.

Show comment
Hide comment
@anditra

anditra Jul 2, 2015

hi there I'm new and this would help me a lot with my current project! can you please post the html too?
Because I don't know how to get the YTid and where do you use the #YTslider.

anditra commented Jul 2, 2015

hi there I'm new and this would help me a lot with my current project! can you please post the html too?
Because I don't know how to get the YTid and where do you use the #YTslider.

@esedeerre

This comment has been minimized.

Show comment
Hide comment
@esedeerre

esedeerre Jul 7, 2015

I´ve not tested it, but i think that ?autoplay=1 won´t work on IOS & Android, so users will have to make a second click... Any solution to this?

I´ve not tested it, but i think that ?autoplay=1 won´t work on IOS & Android, so users will have to make a second click... Any solution to this?

@anditra

This comment has been minimized.

Show comment
Hide comment
@anditra

anditra Jul 15, 2015

I've tried it, but the only thing that works is setting the iframe, but without the id, so it doesn't work. And it woun't remove the iframe with a second click, it just sets another iframe..

anditra commented Jul 15, 2015

I've tried it, but the only thing that works is setting the iframe, but without the id, so it doesn't work. And it woun't remove the iframe with a second click, it just sets another iframe..

@binmatai

This comment has been minimized.

Show comment
Hide comment
@binmatai

binmatai Nov 19, 2015

Really good job on the site, Keep up the good work!
Baa baa Black Sheep

Really good job on the site, Keep up the good work!
Baa baa Black Sheep

@thecopelandcollective

This comment has been minimized.

Show comment
Hide comment
@thecopelandcollective

thecopelandcollective Apr 7, 2016

can you explain what this for statement does?

for (var i = 0; i < length; i++) { if (conts[i].nodeType == 8) ifr = conts[i].textContent; }

can you explain what this for statement does?

for (var i = 0; i < length; i++) { if (conts[i].nodeType == 8) ifr = conts[i].textContent; }

@Jakobud

This comment has been minimized.

Show comment
Hide comment
@Jakobud

Jakobud Apr 25, 2016

@thecopelandcollective

That code is iterating through the contents of the element, and if it's an HTML comment (https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType .... see constant value of 8) then essentially uncomment it, which in turn loads the iframe.

Jakobud commented Apr 25, 2016

@thecopelandcollective

That code is iterating through the contents of the element, and if it's an HTML comment (https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType .... see constant value of 8) then essentially uncomment it, which in turn loads the iframe.

@srinukatari

This comment has been minimized.

Show comment
Hide comment
@srinukatari

srinukatari May 24, 2016

its not working the iframe not loads

srinukatari commented May 24, 2016

its not working the iframe not loads

@boistordu

This comment has been minimized.

Show comment
Hide comment
@boistordu

boistordu Mar 28, 2017

hi sorry to disturb you guys, but where do I put the script? just before the div from the video ?

hi sorry to disturb you guys, but where do I put the script? just before the div from the video ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment