Klik Player dengan gambar :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>animate demo</title>
<style>
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
/*--------------------------------
Swap video with autoplay video
---------------------------------*/
function autoPlayVideo(vcode, width, height){
"use strict";
$("#videoContainer").html('<iframe width="'+width+'" height="'+height+'" src="https://www.youtube.com/embed/'+vcode+'?autoplay=1&loop=1&rel=0&wmode=transparent" frameborder="0" allowfullscreen wmode="Opaque"></iframe>');
}
</script>
</head>
<body>
<div id="videoContainer">
<a class="introVid" href="#video"><img src="https://i.ytimg.com/vi_webp/witZcDhqgR8/mqdefault.webp" alt="witZcDhqgR8" width="450" height="283"/></a>
</div>
<script>
jQuery('a.introVid').click(function(){
autoPlayVideo('witZcDhqgR8','450','283');
});
</script>
</body>
</html>
Klik Player dengan tulisan "Watch the video" :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>animate demo</title>
<style>
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
/*--------------------------------
Swap video with autoplay video
---------------------------------*/
function autoPlayVideo(vcode, width, height){
"use strict";
$("#videoContainer").html('<iframe width="'+width+'" height="'+height+'" src="https://www.youtube.com/embed/'+vcode+'?autoplay=1&loop=1&rel=0&wmode=transparent" frameborder="0" allowfullscreen wmode="Opaque"></iframe>');
}
</script>
</head>
<body>
<div id="videoContainer">
<iframe width="450" height="283" src="https://www.youtube.com/embed/witZcDhqgR8?wmode=transparent" frameborder="0" allowfullscreen wmode="Opaque"></iframe>
</div>
<p><a class="introVid" href="#video">Watch the video</a></p>
<script>
jQuery('a.introVid').click(function(){
autoPlayVideo('witZcDhqgR8','450','283');
});
</script>
</body>
</html>
ConversionConversion EmoticonEmoticon