Hi, I am having trouble getting a video player to work using Javascript. I copied this from a page a developer at my company did, but he is away right now so I can't ask him for help. Here is the HTML:
<div class="feature" style="width:485px; height:273px">
<div class="video-placeholder">
<img src="../../assets/images/figures/tro-video-placeholder.jpg" alt="Dr. Niva Tro" />
<span>Play video</span>
</div>
</div>
<ol class="video-questions">
<li><a href="https://www.youtube.com/watch?v=HKD-mfcphig?HD=1&rel=0&showinfo=0&modestbranding=0&theme=light&color=white" title="Play video">Cover</a></li>
<li><a href="http://www.youtube.com/watch?v=kILqK_FH64w?HD=1&rel=0&showinfo=0&modestbranding=0&theme=light&color=white" title="Play video">Self-Assessment Quizzes</a></li>
<li><a href="http://www.youtube.com/watch?v=rB7lk8pstM4?HD=1&rel=0&showinfo=0&modestbranding=0&theme=light&color=white" title="Play video">Relevancy</a></li>
<li><a href="http://www.youtube.com/watch?v=Dxrfd4mujis?HD=1&rel=0&showinfo=0&modestbranding=0&theme=light&color=white" title="Play video">Problems on Data Interpretation and New Section on Mass Spectra</a></li>
<li><a href="http://www.youtube.com/watch?v=ABbwO1kTJlU?HD=1&rel=0&showinfo=0&modestbranding=0&theme=light&color=white" title="Play video">Nomenclature Flow Chart</a></li>
<li><a href="http://www.youtube.com/watch?v=6JRcwBNfmoA?HD=1&rel=0&showinfo=0&modestbranding=0&theme=light&color=white" title="Play video">Balancing Chemical Equations with Polyatomic Ions</a></li>
<li><a href="http://www.youtube.com/watch?v=vQ5vMQRL8Yc?HD=1&rel=0&showinfo=0&modestbranding=0&theme=light&color=white" title="Play video">Updates to Chapter 7: The Quantum-Mechanical Model of the Atom</a></li>
<li><a href="http://www.youtube.com/watch?v=3R-ZPMBuCOU?HD=1&rel=0&showinfo=0&modestbranding=0&theme=light&color=white" title="Play video">Drawing Resonance Structures</a></li>
<li><a href="http://www.youtube.com/watch?v=ukGrGCQB_64?HD=1&rel=0&showinfo=0&modestbranding=0&theme=light&color=white" title="Play video">Changes to Representations of Bonds</a></li>
<li><a href="http://www.youtube.com/watch?v=M_El47RSUN8?HD=1&rel=0&showinfo=0&modestbranding=0&theme=light&color=white" title="Play video">Electrostatic Potential Maps</a></li>
</ol>
And the Javascript:
function init_video_QA(){
// does element exist?
if(!$('.video-questions')){
// no? stop
return;
}
// yes? continue.
else{
var $list = $('.video-questions'),
$link = $list.find('a'),
$videoPlaceholder = $('.video-placeholder');
// 1. Remove any currently flagged link
$link.each(function(){
// bind click and keypress events
$(this)
.bind('click keypress', function(event){
var $this = $(this),
$href = $this.attr('href'),
$videoID = $(this).attr('href').substr($href.indexOf("=") + 1),
$clipDuration = $(this).attr('data-video-duration') * 1000,
$imgSrc = $videoPlaceholder.find('img').attr('src');
if($this.hasClass('active')){
event.preventDefault();
}
else{
$('.active')
.removeClass('active');
$this
.addClass('active');
// set a timeout for the length of the clip that
// replaces the still; we're using a custom data
// attribute to tag the link with in the markup;
// formula:
// clipDuration = data-video-duration (time in seconds) X 1000
//setTimeout(function(){
// find the currnetly visible player container and
// replace its source with the previously displayed
// video still img
//$videoPlaceholder
//.html('<img src="' + $imgSrc + '" alt="" />');
//}, $clipDuration);
// swap content for actual embedded video
$videoPlaceholder
//.css('display', 'block')
.html('<iframe style="display:block;" width="485" height="273" src="https://www.youtube.com/embed/' + $videoID + '?HD=1&rel=0&showinfo=0&modestbranding=1&autoplay=1&wmode=opaque" frameborder="0" allowfullscreen="allowfullscreen" title="Video"></iframe>');
}
event.preventDefault();
});
$videoPlaceholder
.bind('click keypress', function(){
$('.video-questions')
.find('a:first')
.trigger('click');
});
});
}
}
This is driving me crazy- I can't figure out what I'm doing wrong. Any help is appreciated. Thank you!
