0

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:

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

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

Improve this question

1 Answer 1

Reset to default
1

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('<iframe frameborder="0" height="333" src="' + youtubeLink + '" title="YouTube video player" width="547"></iframe>');
});

Where your video link has class="video-link" and somewhere on the page you have a <div id="the-video-destination-div"></div>.

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.

Improve this answer
4
  • Really, I would add 2 fields, "Youtube Video Image" and "Youtube Video Link" so that you have both to work with, outside of CKEditor.
    – Charlie Schliesser
    Feb 1, 2012 at 14:58
  • Charlie,still stumped. New to js some experience with css. I have been trying to make this work since your generous answer 32 minutes ago. I am still trying it in the ckeditor window in source mode to prototype. I can get the iframe window to appear but don't know where to put the two variables class="video-link" and how/where to create the <div id="the-video-destination-div"></div> I think I do see the value of creating the two fields. since you offered more help, I am gratefully accepting
    – don winchell
    Feb 1, 2012 at 15:35
  • After no further response on this, which was very instructive to a point, I moved on to other alternatives. There is good information here, but could not make it work so have looked into other avenues (still without complete satisfaction) thanks for the help.
    – don winchell
    Feb 4, 2012 at 13:51
  • It is php in the document body field. not for end-user editing. thanks for everyone's help <?php drupal_add_js(' function change_image() { document.getElementById("myiframe").width="290"; document.getElementById("myiframe").height="290"; document.getElementById("myiframe").src="youtube.com/embed/-J3HfllvXWE?autoplay=1&rel=0" ; //use the all collection to access attributes of the IFRAME element }', 'inline'); ?> <p </p> <IFRAME id=myiframe width="0" height="0" frameborder="0" src=""> </IFRAME> <BUTTON onclick=change_image()>Change contents of the ImFRAME</BUTTON>
    – don winchell
    Feb 8, 2012 at 15:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.