asked on

Youtube api and lightbox

I have a div that I open in a lightbox

<!DOCTYPE html>
<html>
<head>
	<title>fancyBox - Fancy jQuery Lightbox Alternative | Demonstration</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
	<!-- Add fancyBox main JS and CSS files -->
	<script type="text/javascript" src="js/jquery.fancybox.js?v=2.1.5"></script>
        <script src="https://www.youtube.com/iframe_api"></script>
	<link rel="stylesheet" type="text/css" href="css/jquery.fancybox.css?v=2.1.5" media="screen" />
       <link href="css/bootstrap.css" rel="stylesheet">
       <style type="text/css">
.voffset  { margin-top: 2px; }
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 30px; }
.voffset5 { margin-top: 40px; }
.voffset6 { margin-top: 60px; }
.voffset7 { margin-top: 80px; }
.voffset8 { margin-top: 100px; }
.voffset9 { margin-top: 150px; }

.bluetop {
	background-image: url('img/bluetop.png');
    background-repeat: repeat-x;
    background-position: top;
	text-align:center; 
}
.rewardstime {
	font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	font-size:12px;
	color:#9ccae4;
	text-align:right;
}
.fancybox-custom .fancybox-skin {
			box-shadow: 0 0 50px #222;
		}

</style>
</head>


<script src="http://www.youtube.com/player_api"></script>
<div id="data" style="display:none;">
	<div class="container-fluid">
  		<div class="row">
    		<div class="col-md-12 bluetop">
  			</div>
	</div>
	<div class="container">
  		<div class="row">
    		<div class="col-md-10 col-md-offset-1">
      		<div class="rewardstime"><p><span id="current-time">0:00</span> / <span id="duration">0:00</span></p></div>
    		</div>
  		</div>
	</div>
	<div class="container">
  		<div class="row text-center">
    		<div class="col-md-10 col-md-offset-1">
				<div class='embed-container'> 
					<div id="video-placeholder"></div>
				</div>
    		</div>
  		</div>
  		<div class="row voffset4">
   			<div class="text-center col-md-10 col-md-offset-1">
      		<div class="well"><strong>Watch more scenes on Youtube.com</strong></div>
    		</div>
  		</div>
	</div>
</div>

<script type="text/javascript">
var autoplay = 0;
var player,
    time_update_interval = 0;


$(".various").fancybox({
		transitionIn	:	'elastic',
		transitionOut	:	'elastic',
		speedIn			:	600, 
		speedOut		:	200,
		scrolling		:	'auto', 
		overlayShow		:	false,
		closeClick		: false,
		openEffect		: 'none',
		closeEffect		: 'none',
		onCleanup     	: varPlayer,
		beforeShow: function() {
			var autoplay = '1'
			alert(autoplay);
		},
		afterClose: function() {
			var autoplay = '0'
			alert(autoplay);
		}

	});



function onYouTubeIframeAPIReady() {
    player = new YT.Player('video-placeholder', {
        width: 854,
        height: 480,
        videoId: 'M7lc1UVf-VE',
        playerVars: {
            color: 'white',
			autoplay: autoplay,
			enablejsapi: '1',
			fs: '0',
			rel: '0',
			showinfo: '0'
        },
        events: {
            onReady: initialize,
        }
    });
}

	
function varPlayer(){
	var autoplay = 1;
}


function initialize(){
    // Update the controls on load
    updateTimerDisplay();
    updateProgressBar();
	varPlayer();
	alert(autoplay);
    // Clear any old interval.
    clearInterval(time_update_interval);

    // Start interval to update elapsed time display and
    // the elapsed part of the progress bar every second.
    time_update_interval = setInterval(function () {
        updateTimerDisplay();
        updateProgressBar();
    }, 1000);


    $('#volume-input').val(Math.round(player.getVolume()));
}
function pausePlayer(){
	player.pauseVideo();
}

// This function is called by initialize()
function updateTimerDisplay(){
    // Update current time text display.
    $('#current-time').text(formatTime( player.getCurrentTime() ));
    $('#duration').text(formatTime( player.getDuration() ));
}


// This function is called by initialize()
function updateProgressBar(){
    // Update the value of our progress bar accordingly.
    $('#progress-bar').val((player.getCurrentTime() / player.getDuration()) * 100);
}


// Progress bar

$('#progress-bar').on('mouseup touchend', function (e) {

    // Calculate the new time for the video.
    // new time in seconds = total duration in seconds * ( value of range input / 100 )
    var newTime = player.getDuration() * (e.target.value / 100);

    // Skip video to new time.
    player.seekTo(newTime);

});


// Playback

$('#play').on('click', function () {
    player.playVideo();
});


$('#pause').on('click', function () {
    player.pauseVideo();
});


// Sound volume


$('#mute-toggle').on('click', function() {
    var mute_toggle = $(this);

    if(player.isMuted()){
        player.unMute();
        mute_toggle.text('volume_up');
    }
    else{
        player.mute();
        mute_toggle.text('volume_off');
    }
});

$('#volume-input').on('change', function () {
    player.setVolume($(this).val());
});


// Other options


$('#speed').on('change', function () {
    player.setPlaybackRate($(this).val());
});

$('#quality').on('change', function () {
    player.setPlaybackQuality($(this).val());
});


// Playlist

$('#next').on('click', function () {
    player.nextVideo()
});

$('#prev').on('click', function () {
    player.previousVideo()
});


// Load video

$('.thumbnail').on('click', function () {

    var url = $(this).attr('data-video-id');

    player.cueVideoById(url);

});


// Helper Functions

function formatTime(time){
    time = Math.round(time);

    var minutes = Math.floor(time / 60),
        seconds = time - minutes * 60;

    seconds = seconds < 10 ? '0' + seconds : seconds;

    return minutes + ":" + seconds;
}


$('pre code').each(function(i, block) {
    hljs.highlightBlock(block);
});
</script>

</body>
</html>

Open in new window

to play a video and also a countdown clock of the remaining time. I need the video to auto play when the div is opened. The problem I'm having is the video is set to autoplay so when the hidden div loads the video starts and you can't see it but you can hear it. So what I'm trying to do is when you click the fancybox to open it would change the autoplay var to auto play and then when you click the fancybox to close it would unload the video and not play it in the background. I also want the clock to show remaining time and count down.

viki2000

I do not know to answer directly your question, also I have no time to dig, but when I have seen your question I remebered that I wanted to do somethings similar in the past, but I have no time to impelment it.
I asked similar questions or with related content.
Maybe it will help you to go troough some of the answers:
https://www.experts-exchange.com/questions/28692815/Multiple-HTML5-Videos-One-player-Dreamweaver-CS6.html
https://www.experts-exchange.com/questions/28705714/jQuery-Document-and-HTML5-Lightbox.html

Member_2_248744

greetings ucohockey, , You seem to think that using the "player" autoplay property is what you need to fix. But from experience, in using players that can change the url of the media played, AND can be clicked on and off screen display (as in your fancy box), you need to NOT depend on the autoplay, but directly control the player with direct commands to play when the thumbnail is clicked with player.playVideo(); and stop the player when the fancy box goes off screen view, the autoplay is not really equipped to do these things.

I do not have time to go through all of that code of yours but you might try changing this part

  beforeShow: function() {
    player.playVideo();
    },
  afterClose: function() {
      player.pauseVideo();
    }

Open in new window

if you already have some media cleanup code some where that unloads the vid when the fancy box closes, you may not need the player.pauseVideo(); part. And you might set the autoplay to false?

ucohockey

ASKER

Thanks guys but I have tried the above not sure if its my code but I couldn't get tit to work.

Member_2_248744

What are the results u get? ? Because when you say this - "couldn't get it to work" , it tells nothing about which part (or parts) of the problem that are not working? Does it start playing before the fancybox is displayed? Does it not start playing when the fancybox is displayed? Does it not stop playing when the fancybox is dismissed?

did you set the autoplay to false? -

playerVars: {
  color: 'white',
  autoplay: 0,
  enablejsapi: '1',
  fs: '0',
  rel: '0',
  showinfo: '0'
  }

Open in new window

ucohockey

ASKER

I'm sorry slick, they fancybox opens and the video is displayed but does not auto play. Yes I changed the auto play to false. thanks again for the help

ASKER CERTIFIED SOLUTION

Member_2_248744

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial