0

I am using the following to put a video on a wordpress site:

<param name="src" value="http://www.mywebsite.com/announcement.mov">
<param name="autoplay" value="true">
<param name="type" value="video/quicktime" height="560" width="950">

<embed src="http://www.mywebsite.com/announcement.mov" height="560" width="950" autoplay="false" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/">

The part I don't like about this is that you can see the opening frame of the video whenever you are on the page. I would like it if there was a way to make it show just black or show a blank screen until you click the play button.

Wooble
  • 87,717
  • 12
  • 108
  • 131
Andy
  • 875
  • 3
  • 9
  • 12

1 Answers1

0

You would want to use a video placeholder as described in this thread on Stack Overflow: How to add a splash screen/placeholder image for a YouTube video

One point of consideration: If jQuery/JavaScript fails, the video won't load either.

Update

In your HTML:

<img class="video-placeholder" src="placeholder.jpg" data-video="http://www.mywebsite.com/announcement.mov">

In your JS file:

$('.video-placeholder').click(function(){
    var video = '<param name="src" value="' + $(this).attr('data-video') + '">
    <param name="autoplay" value="true">
    <param name="type" value="video/quicktime" height="560" width="950">
    <embed src="' + $(this).attr('data-video') + '" height="560" width="950" autoplay="false" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/">';
    $(this).replaceWith(video);
});
Community
  • 1
  • 1
Chris Ferdinandi
  • 1,892
  • 4
  • 26
  • 34
  • Where within this code would I put the cover image? $('img').click(function(){ var video = ''; $(this).replaceWith(video); }); – Andy Aug 14 '13 at 13:13
  • You wouldn't. That cover image goes in the HTML, not the script. Will update my response with more detail. – Chris Ferdinandi Aug 14 '13 at 14:39
  • So I don't need any of this code that I had before?: – Andy Aug 14 '13 at 20:11
  • It's only this in the html? – Andy Aug 14 '13 at 20:13
  • Another issue is that I can see the javascript code on the webpage when I try this (as if it is text that I wrote in). I thought I could just put javascript code when I was in the text view in wordpress. – Andy Aug 14 '13 at 20:14
  • is there somewhere else I am supposed to put javascript code in wordpress? – Andy Aug 14 '13 at 20:44
  • Andy, here's what's happening with the code above: You put only the image markup (replace the `data-video` bit with the appropriate URL) in your text editor. When someone clicks on the image, jQuery pulls the `data-video` value into the markup, and replaces the image with new HTML. – Chris Ferdinandi Aug 14 '13 at 20:58
  • JavaScript should not be placed in the text editor. Add it to an external JS file, or at least in the `footer.php` file between `` tags. – Chris Ferdinandi Aug 14 '13 at 20:59