YouTube AutoPlay on Website First Visit ONLY? - html

Question

I'm in a sticky situation.
I'm trying to add a YouTube Video to my website that autoplays...I've done that...However, is there a way to tell if this person has visited this site already, like using cookies, or something even easier (I don't know how to use cookies haha) and then NOT autoplay if they've visited the site more than once?
I could imagine it could get quite annoying if you visit a website 3 or 4 times, and this video keeps playing every time you visit!
Here's the code I've got so far...
<iframe width="455" height="256" src="https://www.youtube.com/embed/qYTlJdYe0lw?rel=0&autoplay=1;showinfo=0" frameborder="0" allowfullscreen></iframe>
Thanks heaps for your help in advance!

Answer 1

here some live example by jsfiddle:
Play youtube video only once at first page visit.
I am using cookies and youtube JavaScript API.
<!-- html -->
<div id="video_container"></div>
//JavaScript
$(document).ready(function() {
//inject script tag in dom with iframe-api as source
//on success this will call function "onYouTubeIframeAPIReady"
//more info https://en.wikipedia.org/wiki/JSONP
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
//this is only for testing reason
//remove cookie
$('button').on('click', function(){
document.cookie = "yt_video=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
});
});
var player;
function onYouTubeIframeAPIReady() {
//JavaScript API is loaded -> create player
//more info https://developers.google.com/youtube/iframe_api_reference#Getting_Started
player = new YT.Player('video_container', {
height: '390',
width: '640',
videoId: 'SzPfOuFvlfs',
events: {
'onReady': onPlayerReady
}
});
};
function onPlayerReady() {
//check if cookie exist. If not set one and play video
if (getCookie('yt_video') === '') {
document.cookie="yt_video=SzPfOuFvlfs";
player.playVideo();
}
}
// helper function
// get cookie value
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
}
return "";
}