Hi,

On www.arbody.nl/ I use a tag to show a youtube video. Works fine. But the opening screen of this video is not very attractive. And it is this opening screen wich shows at first (before playing the video) at the website. How can I add a nicer image to cover the opening screen? (without adjusting the video itself)

Maurice

Hi Maurice,

Which tag are you using? Do you use a Joomla plugin or do you mean you're getting the embed code from Youtube.com?

Give the following trick a try:
isaac.wedin.org/2009/11/12/image-overlay-for-youtube-embed/

Hope this helps!

Kind regards,
Nick

Hi Nick,

Tag: I use.
The trick: I'm not sure if I fully understand what I should do.1. Wich parts of the code should I just copy and paste?
2. Wich parts do I have to replace with my 'own' code besides the image source?
3. Do I still have to make/edit some css to make it work?
4. Should I add some Javascript to make it work? If so, please help, because I'm not familiar with Js.
5. In the last div I put the same youtube tags as I have now already, correct?

Regards, Maurice

Hi Maurice,

Are you using the AllVideos plugin? Which plugin do you use?

Kind regards,
Nick

Yes, the allvideos plugin,
Regards, Maurice

Hi Maurice,

OK, in that case, what you can do is create a png by the same name as the video, in your case "Q-LQaDv9ocM", and upload it to the folder and that should be the default starting image. This trick works for mp4s in AllVideos, but I'm not 100% it will work with YouTube videos (although, it should).

Kind regards,
Nick

Hi Nick,

1. This is something different then the trick you mentioned earlier, right?
2. To wich folder should I upload this png?
3. Should the size of the png be exactly the same as the size of the video screen on my website?

Regards, Maurice

Hi Maurice,

1) Yes, because you're using the AllVideos plugin.
2) To the same folder as you've specified in your plugin settings.
3) That would be best, yes. You should be able to make it whatever size you'd like though.

Kind regards,
Nick

Hi Nick,

Untill now I do not get it working. Maybe because I've uploaded the png file to the wrong folder. In the parameter settings of AllVideos it says for Video parameters (local video folder): images/stories/videos. So I uploaded the png file to this same folder. Is that correct?
If this is correct, any suggestions to get it working?

Regards, Maurice

Hi Maurice,

Did you read the tutorial provided by Nick? isaac.wedin.org/2009/11/12/image-overlay-for-youtube-embed/

Did you name your png file the same as your video? Did you put the appropriate files in your videos directory?

What steps have you taken so far? :)

Hi Tessa,

I thinks you are a little confused, and are combining two methods. Also read my previous posts/questions. As far as I understood Nick suggested two methods and I applied the second one exactly as Nick suggested in his last post(the allvodeos method). There are my questions about.

Maurice

Yes, they are two different methods. Looks like the All Videos method won't work for youtube videos. So, instead, try getting the Youtube embed code from YouTube (under the share button at the video), then give the isaac.wedin.org/2009/11/12/image-overlay-for-youtube-embed/ method a try.

Kind regards,
Nick

Hi Nick,

When I will try to use the isaac method, the questions I asked earlier about this method, become relevant again. This is what I asked earlier before we jumped to the 'allvideos method':

Hi Nick,

Tag: I use

Code
{youtube}Q-LQaDv9ocM|479|350|0{/youtube}
.
The trick: I'm not sure if I fully understand what I should do.

Code
<div onclick="thevid=document.getElementById('thevideo'); thevid.style.display='block'; this.style.display='none'"><img src="vidthumb.jpg" style="cursor:pointer" /></div><div id="thevideo" style="display:none">

(put the YouTube embed stuff here)

</div>

1. Wich parts of the code should I just copy and paste?
2. Wich parts do I have to replace with my 'own' code besides the image source?
3. Do I still have to make/edit some css to make it work?
4. Should I add some Javascript to make it work? If so, please help, because I'm not familiar with Js.
5. In the last div I put the same youtube tags as I have now already, correct?

Regards, Maurice

Hi Maurice,

1) YouTube's embed code.
2) You can also replace "thevideo" and "thevid", respectively, if you'd like.
3) Don't think so.
4) Only what the tutorial gives :)
5) No, because you're not using AllVideos anymore.

Hope this helps!

Kind regards,
Nick