-4

I am trying to get my video to play when I click on the .gif.

I have tried multiple snipits, and coding it myself, but have not found a solution yet. 

<div class="video" id="videoplayer">
    <img src="images/gifisdone.gif">
    <!-- <iframe width="940" height="529" src="https://www.youtube.com/embed/oUflzV5z9sc" frameborder="0" allowfullscreen></iframe>-->
</div>
MagicMatt253
  • 3
  • 2

1 Answers1

0

Should be fairly simple. Just add a click call to the gif and then load the video. Run the snippet below to test it out.

   <!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="video" id="videoplayer">
<img src="https://media.giphy.com/media/H6niY8viJQvjYRJ7OD/giphy.gif" id="videolink1">
</div> 
<div id="divVideo">
<iframe width="420" height="345" >
</iframe>
</div>

</body>
<script>
$('#videolink1').click(function(event) {
var videoFile = 'https://www.youtube.com/embed/tgbNymZ7vqY'+'?&autoplay=1';
$('#divVideo iframe').attr('src', videoFile);
});
</script>
</html>
Sunil Lama
  • 4,531
  • 1
  • 18
  • 46
  • Read the question again - The OP is asking about **YouTube** videos which has its own [SDK](https://developers.google.com/youtube/iframe_api_reference), it's not the same as the HTML5 video API – Alon Eitan Jul 03 '19 at 18:05
  • @AlonEitan, my bad, we can just change the source of iframe to load youtube videos – Sunil Lama Jul 03 '19 at 18:25