Autoplay Youtube Video when scrolling to
Is there a way to autoplay a YouTube video when you view it on a page? I tried this and it looks like some methods for old youtube embed code. I'm looking for an updated version of this - does anyone know how to automatically play a youtube video when scrolling down a certain number of pixels on a page?
thanks for the help
source to share
<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 automatically play videos. to your question to only reproduce it when scrolling down, check this thread.
Start autoplay video based on scroll position
Here is the complete code. 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>
source to share
I know this is a very old question, but I searched for it and none of the answers worked for me, so this is the solution I ended up with:
<div id="video-box">
<iframe id="i_video" src="" frameborder="0" allowfullscreen></iframe>
</div>
<script>
window.onscroll = function() {
var dv = document.getElementById('video-box');
var v = document.getElementById('i_video');
if ((window.scrollY < (dv.offsetTop + dv.offsetHeight)) && ((window.scrollY + window.outerHeight) > dv.offsetTop)) {
if (v.src=='' || v.src==location.href) {
v.src='VIDEO_URL';
}
} else {
v.src='';
}
}
</script>
source to share