click image to play video in iframe Objective - have a blank screen with only an image on it. (a "play video" button) when the button is clicked a video (from youtube) opens in a section on the screen that is maybe 200X300. Ideally this would all be done within ckeditor so the end user can setup and change as desired. (note - I am not sure if iframe is needed, but this is how I was able to do it)

I can get the appearance I want easily by embedding the following code into ckeditor in "source" mode:

&lt;p&gt;&lt;iframe frameborder="0" height="333" src="http://www.youtube.com/embed/-J3HfllvXWE" title="YouTube video player" width="547"&gt;&lt;/iframe&gt;&lt;/p&gt;


But can not figure out how to have a blank screen that shows only an image that opens the video when it is clicked. thanks for any help
You would need to use JavaScript to make this happen. You're not going to have a good time with users doing this in CKEditor though, as they'll likely break this functionality when they use the editor and alter the content in it (the JS will be invisible to them, unless they're in source mode, and they could easily delete it without knowing it).

I have achieved similar behavior using a dedicated field called "YouTube Video Link". The user pastes a link in there and then I have a play button execute that link in an iframe overlay using Fancybox.

The JavaScript (jQuery) that you'd want to use is:

// When a user clicks the link...
$('.video-link').click(function(e) {

  // Don't let the browser open the link like normally.
  e.preventDefault();

  // Capture the link's HREF attribute in a variable.
  var youtubeLink = $(this).attr('href');

  // Set the HTML (the content) of the "video destination div" to = your iframe, including the youtubeLink that the user original saved into this node.
  $('#the-video-destination-div').html('&lt;iframe frameborder="0" height="333" src="' + youtubeLink + '" title="YouTube video player" width="547"&gt;&lt;/iframe&gt;');
});


Where your video link has class="video-link" and somewhere on the page you have a &lt;div id="the-video-destination-div"&gt;&lt;/div&gt;.

Please add a comment to this answer to help funnel the nuances of what you're trying to do and I can edit my answer to reflect.