<iframe id="ytplayer" type="text/html" width="640" height="390"
src="http://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com"
frameborder="0"/>
Use the above to play the video automatically. per your question to play it only when scrolled down, check this thread.
Triggering a video autoplay based on scroll position
Here is the complete code. have tested this on firefox and chrome. You can check the sample working here.
http://www.foftv.com/samplejs/vidscroll2.html
<html><head>
<style>
#e1, #e2, #e3, #e4, #e5, # ytplayer{
height:390px; width:640px; display: block;
opacity: 0;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Replace the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
height: '390',
width: '640',
playerVars : {
autoplay : 0
},
videoId: 'M7lc1UVf-VE'
});
}
$(window).scroll(function() {
$("iframe").each( function() {
if( $(window).scrollTop() > $(this).offset().top - 200 ) {
$(this).css('opacity',1);
player.playVideo();
} else {
$(this).css('opacity',0);
player.stopVideo();
}
});
});
</script>
</head>
<body>
<div id="e1">Some element 1</div>
<div id="e2">Some element 2</div>
<div id="e3">Some element 3</div>
<div id="ytplayer">Youtube player here</div>
<div id="e4">Some element 4</div>
<div id="e5">Some element 5</div>
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
