1

I have a simple HTML/JS document in which I am after clicking on the image trying to play the video:

<!DOCTYPE html>
<html lang="en">

<head>
<script type="text/javascript">
    var embedCode = '<object data="http://www.youtube.com/watch?v=Ac_qGnPX8eI" type="application/x-shockwave-flash" height="240" width="320"><param name="src" value="http://www.youtube.com/watch?v=Ac_qGnPX8eI"><param name="allowfullscreen" value="true"></object>'
</script>
</head>

<body>
<div id="videocontainer">
    <img src="C:\thesis\100GreatP\eclipse_ws\test\src\org\cnstar\wiki\data\calm_waters.jpg" onclick="document.getElementById('videocontainer').innerHTML = embedCode;" height="240" width="320" />
</div>
</body>
</html>

However, after clicking on the picture, nothing happens. This issue was already explained in question replace image with a video embeded, where the solution was presented in the way I did it in my HTML document. But that is not working for me. Shockwave/Flash player installed on the computer. Didnt succeed to load in any of the browsers (IE, Firefox, Chrome). Thanks for your help.

Community
  • 1
  • 1
MichalB
  • 3,281
  • 6
  • 32
  • 46
  • The problem is with your YouTube embed code. Get the correct embed code by going to [**the video**](http://www.youtube.com/watch?v=Ac_qGnPX8eI) and clicking on Share->Embed below the video. – Shef Apr 03 '13 at 16:38
  • Yeah, this is one of the problems. I have changed the link, however, still not working. I just click on the image, image will disappear and white box appears, no video. – MichalB Apr 03 '13 at 17:21
  • It seems to be [**working fine**](http://jsfiddle.net/Shef/tTWg8/) for me. Maybe there is a restriction on your browser not allowing videos to be played on local HTML files? – Shef Apr 04 '13 at 18:53

2 Answers2

0

The YouTube JavaScript API, if followed correctly, provides a way for you to load your vidoes on click. Just gotta read up on the API. Read towards the bottom of the API page for a demo with using a click link.

https://developers.google.com/youtube/js_api_reference

klewis
  • 7,459
  • 15
  • 58
  • 102
0

Took this right of the site https://developers.google.com/youtube/player_parameters

<script type="text/javascript">
var embedCode = '<object width="640" height="390"> <param name="movie" value="http://www.youtube.com/watch?v=Ac_qGnPX8eI"></param> <param name="allowScriptAccess" value="always"></param><embed src="https://www.youtube.com/v/u1zgFlCw8Aw? version=3&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" 
width="640" height="390"></embed></object>'

<script> 
  function playVid(){
document.getElementById('videocontainer').innerHTML = embedCode
 }


<div id="videocontainer">
<img       src="../../../../thesis/100GreatP/eclipse_ws/test/src/org/cnstar/wiki/data/calm_waters.jpg"     onclick="playVid();" height="240" width="320" >
</div>
user1740058
  • 45
  • 1
  • 9