Menu
Is there any way to autoplay a youtube video when you scroll to it on the page? I've tried to google this and it looks like theres some methods for the old youtube embed code. I'm looking for an updated version of this - does anyone know how to automatically play youtube videos when you scroll down a certain amount of pixels on a page?
Thanks for your help
219
Open the YouTube app on your TV. Go to Settings . Scroll to Autoplay. Select the options to turn Autoplay On or Off.
On the Home tab of the YouTube app, tap your profile picture, then tap Settings. 2. Tap Autoplay, then tap the autoplay switch to the off position to turn off the feature.
YouTube recently updated the home feed in its mobile application so that videos will now automatically begin playing (without sound) as users browse. If you want to stop videos from automatically playing on your home feed, our guide will show you how. Note: These screenshots were captured in the YouTube app on iOS.
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
