SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast headless1226's Avatar
    Join Date
    Sep 2008
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Embed google video or youtube with custom thumbnail

    Does anyone know what I need to use a custom thumbnail when embedding youtube or google video?

    Thanks in advance
    Develareel Innovate
    Blogsreel Reel World Blog
    Social Network Connect here

  2. #2
    SitePoint Zealot the DtTvB's Avatar
    Join Date
    Jul 2006
    Location
    Thailand
    Posts
    162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think you can change the thumbnail.

    But you can, display an image, and then the viewer click on it, replace that image with the video embed, auto start.

  3. #3
    SitePoint Enthusiast headless1226's Avatar
    Join Date
    Sep 2008
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by the DtTvB View Post
    I don't think you can change the thumbnail.

    But you can, display an image, and then the viewer click on it, replace that image with the video embed, auto start.
    Would you mind giving me an example, I am not sure how to show an alternate image in the embed tag

    Thanks in advance
    Develareel Innovate
    Blogsreel Reel World Blog
    Social Network Connect here

  4. #4
    SitePoint Zealot the DtTvB's Avatar
    Join Date
    Jul 2006
    Location
    Thailand
    Posts
    162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am not sure, but you can do something like this:

    Code:
    <div onclick="this.style.display='none'; this.nextSibling.style.display='block';"><img src="image.png" style="cursor:pointer" /></div><div style="display:none">
    <!-- Embed code here -->
    </div>

  5. #5
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent thank you the DtTvB - however this code doesn't seem to work with Firefox. When you click the thumbnail it disappears and nothing else happens.

  6. #6
    SitePoint Member
    Join Date
    Oct 2009
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How to have a custom YouTube video thumbnail

    I confirm the following code to work in IE 8, FF 3.5.3 and Safari 4.0.3:
    Code:
    <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="h**p://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="h**p://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>
    had to replace http with h**p so this from software does not complain.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •