Once again, you teach me something!
Okay so here is the backstory:
1. I uploaded a video to Photobucket and want to embed it onto a Webpage. I have done this before as they provide the code.
2. This time however, the "thumbnail" or "Static" photo they provided was not the full frame. It is off center, blown up and really blurry. So it looks "bad" on the Website.
3. So, I did some searching and found a thread from 2008 that showed how to make a photo "clickable" on a Website that will then start the video. A "click to play video" sort of thing.
4. The Java Script was written for YouTube though and not PhotoBucket. I got it to work using their original script and test video that is still up in YouTube; however, when I replaced the YouTube video with my Photobucket Video, all I get is a white screen. Which was talked about in the thread, however, the person who fixed the code didn't say why that happened, just fixed the code.
5. Photobucket converts the video that I am using into .mp4
6. I have tried Chrome and IE, neither worked.
7. My photo works fine and will click on either their video or mine, just when I do mine, I get the white screen.
8. for testing, here is a video in Photobucket
If you click on this video, you will see a box on the right with all the links Photobucket provides for embedding. When I tried to paste them here, they got all messed up:
HOWEVER... I also tried using this link:
'http://s444.photobucket.com/albums/qq167/rockzmom/MasterRussian/364b632a.mp4'
9. Here is the original code: I had to add an extra space between the : and the P so as not to get a smiley face on the line ... style="cursorointer"
So, I replaced my photo in the "image.png" and my video in BOTH places where it has YouTube leaving the &hl=en&fs=1&autoplay=1 part of the code. So I only took out this part 'http://youtube.com/v/jxXukpxNSx4' and put my video link in its place.
<div onclick="this.nextSibling.style.display='block'; this.style.display='none'"><img src="image.png" style="cursor: pointer" /></div><div style="display:none">
<!-- Embed code here -->
<object width="425" height="344"><param name="movie" value="http://youtube.com/v/jxXukpxNSx4&hl=en&fs=1&autoplay=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://youtube.com/v/jxXukpxNSx4&hl=en&fs=1&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>
<!-- End Embed code -->
</div>
10. If you want for testing, you can use this photo
'http://i444.photobucket.com/albums/qq167/rockzmom/6fdda28f.jpg'
11.......... Any ideas oh wise ones???![]()