-
-
Save zigotica/4438876 to your computer and use it in GitHub Desktop.
.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"); | |
}); | |
}); |
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
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.
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 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..
Really good job on the site, Keep up the good work!
Baa baa Black Sheep
can you explain what this for statement does?
for (var i = 0; i < length; i++) { if (conts[i].nodeType == 8) ifr = conts[i].textContent; }
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.
its not working the iframe not loads
hi sorry to disturb you guys, but where do I put the script? just before the div from the video ?
Works perfectly, and makes pages with a bunch of videos load fast. Thanks!
I tried this technic for add a poster to a youtube video. It didn't worked at beginning, but I suspect it was linked to youtube url. I had the impression jsfiddle couldn't read this url : <!-- <iframe width="940" height="529" src="http://www.youtube.com/embed/rRoy6I4gKWU?autoplay=1" frameborder="0" allowfullscreen></iframe>-->
but with link get from share button on a youtube video, it worked. (july 2023)
For example, this worked :
<!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/0AugFrZPP9U" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> -->
jsfiddle link - poster for youtube video - with new youtube link
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!