Sometimes I need to insert youtube video looped, without sound and without controls, basically it should work like a gif. I’ve tried imgur video to gif, but it limited to 15 seconds video and a bit buggy (need to use http link instead of https).
And I thought that it would be easier
to just insert youtube player without controls and info, and use IFrame API
for looping (loop param works only with flash player) and muting.
So we need to insert IFrame API script and our script:
<script src="//www.youtube.com/iframe_api"></script>
<script>
function onYouTubeIframeAPIReady() { // called automatically when IFrame API loaded
[].forEach.call(document.querySelectorAll('.gifify'), function(el) {
var player = new YT.Player(el, {
events: {
'onReady': function() {
player.mute();
player.playVideo();
},
'onStateChange': function(state) {
if (state.data === 0) { // video ended
player.seekTo({seconds: 0});
player.playVideo();
}
}
}
});
});
}
</script>
And then insert video with ?enablejsapi=1&showinfo=0&controls=0 params and gifify class, like:
<iframe class="gifify" src="https://www.youtube.com/embed/4YKx9z6j1aA?enablejsapi=1&showinfo=0&controls=0" frameborder="0"></iframe>
In action: