tech @ Beacon Deacon

YouTube: Play on Hover

Jamie Johnson
Author of Velocity: The Basics: Scripting with a $ here and a # to do, Senior Web Developer and former Computing Support Analyst and Licensed Professional Counselor

June 18, 2015

Check out the videos below. If you hover over them, they begin to play. If you remove your mouse from them, they reset.

jQuery Version

If you want to play a YouTube video by hovering over it, use the following code (assuming you have jQuery loaded):

<iframe class="yt560x315" id="ytplayer" src="https://www.youtube.com/embed/MVKts0fBW34?rel=0" frameborder="0" allowfullscreen></iframe>
<script>
/* YouTube Play on Hover (jQuery version) by James Arthur Johnson @jamesarthurjohn */
var playersrc=$('#ytplayer').attr('src');
$('#ytplayer').mouseover(function(){
$('#ytplayer').attr('src',playersrc+'&autoplay=1');
});
$('#ytplayer').mouseout(function(){
$('#ytplayer').attr('src',playersrc);
});
</script>

<style type="text/css">
/* @jamesarthurjohn */
.yt560x315 { max-width: 560px; width: 100%; *width: 560px; height: 315px; }
@media print { .yt560x315 { display: none; } }
@media screen and (max-width:600px) {
.yt560x315 { clear: both; max-width: 448px; width: 100%; width: *448px; height: 252px; }
}
@media screen and (max-width: 480px){
.yt560x315 { clear: both; max-width: 336px; width: 100%; width: *336px; max-height: 189px; height: 100%; *height: 189px; }
}
@media screen and (max-width: 350px) {
.yt560x315 { clear: both; max-width: 280px; width: 100%; width: *280px; max-height: 158px; height: 100%; *height: 158px; }
}
@media screen and (max-width: 240px) {
.yt560x315 { clear: both; max-width: 224px; width: 100%; width: *224px; max-height: 126px; height: 100%; *height: 126px; }
}
</style>

Note that I also removed the iframe attributes and added some CSS to make the video responsive.

Plain JavaScript Version

If you do not want to use jQuery (i.e., not wanting to load the library), then you can accomplish the same with some different markup and plain JavaScript:

<!-- YouTube Play on Hover (JavaScript version) by James Arthur Johnson @jamesarthurjohn -->
<script>var playersrc;</script>
<iframe class="yt560x315" id="JSytplayer" src="https://www.youtube.com/embed/MVKts0fBW34?rel=0" onmouseover="this.src=playersrc+'&autoplay=1'" onmouseout="this.src=playersrc" frameborder="0" allowfullscreen></iframe>
<script>playersrc=document.getElementById('JSytplayer').src;</script>

And you can apply the responsive style here as well per the code above.

What about touch devices?

There is an issue with the above implementations if one is using a touch device since touch devices have no hover. To make this touch friendly (which is what you would want for a responsive site), apply some of the code from http://ctrlq.org/code/19616-detect-touch-screen-javascript (later referred to at their code) and make some additional changes to my code. Here are the steps:

First, ensure you have jQuery loaded as I am using my jQuery version of the implementation as the basis for this. Thus, you will want to have this markup (Note: I used a different id attribute value):

<iframe class="yt560x315" id="touchplayer" src="https://www.youtube.com/embed/MVKts0fBW34?rel=0" frameborder="0" allowfullscreen></iframe>

Second, use their code to detect touch devices:

<script>
function is_touch_device() { /* source: http://ctrlq.org/code/19616-detect-touch-screen-javascript */
return (('ontouchstart' in window)
|| (navigator.MaxTouchPoints > 0)
|| (navigator.msMaxTouchPoints > 0));
}
<script>

Third, use my jQuery version of YouTube Play on Hover and put my code within a function like this:

<script>
/* YouTube Play on Hover (jQuery version) by James Arthur Johnson @jamesarthurjohn */
function ytplayonhover(){ var playersrc=$('#touchplayer').attr('src');
$('#touchplayer').mouseover(function(){
$('#touchplayer').attr('src',playersrc+'&autoplay=1');
});
$('#touchplayer').mouseout(function(){
$('#touchplayer').attr('src',playersrc);
});
}
</script>

Finally, you add the condition generated from their code to call the function, which runs my code:

<script>
if (!is_touch_device()) {
ytplayonhover();
}
</script>

Essentially, this will work with the hover on non-touch devices, but will not play on hover on touch devices.