How to insert youtube or other offsite media?

[cyonite]

Hi
Awesome editor but I'm trying to figure out how to insert youtube clips.
I can honestly not understand how to use the method with certain folders and image files with youtube clips. I really need a concrete step by step example for this.
So do I have to make a youtube, flickr plugin for this to work?

Thx in advance
Andreas

[mr_lundis]

The directory approach to this problem is intended for on-site media, for off-site media I don't have any good solution. One possible approach would be to insert a link and based on it's target url replace it width an flash object.

Example:

Code: Select all

// The youtube link:
<a href="http://www.youtube.com/watch?v=1smATU3p4Qs">Video</a>

// Take the video id (1smATU3p4Qs) and insert it in the following code:
<object width="425" height="344">
    <param name="movie" value="http://www.youtube.com/v/<Inser video id here...>&hl=en&fs=1"></param>
    <param name="allowFullScreen" value="true"></param>
    <embed src="http://www.youtube.com/v/<...and here>=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed>
</object>


This can be done at the server side using PHP, ASP, Ruby, etc. or the client side by JavaScript.

[jfh]

Yes - there's an howto here.

[shacker]

Our use case is a small staff of 100% trusted editors. We are absolutely positively not worried about someone inserting malicious code. I don't want to build a server-side parsing solution... I just want WYMEditor to stop mangling/denuding the <object> tags we so carefully insert. What can I change in WYME to make it leave those alone?

Thanks for any tips.

[petha443]

Hi!

What I do for off site media, like Youtube is that I add a image with a certain class and embeds information to be able to recreate the object tags.

some example code
This is for adding a button in wymeditor

Code: Select all

   $('.wymeditor').wymeditor({
             postInit: function(wym) {
              var html = "<li class='wym_tools_newbutton'>"
                     + "<a name='NewButton' href='#'"
                     + " style='background:"
                     + " '#000'>"
                     + "Do something"
                     + "</a></li>";

            //add the button to the tools box
               jQuery(wym._box)
               .find(wym._options.toolsSelector + wym._options.toolsListSelector)
               .append(html);

            //handle click event
               jQuery(wym._box).find('li.wym_tools_newbutton a').click(function() {
                   //do something
                   var youTube = prompt("Youtube embed text","");
                   var dom = $(youTube);
                   var width = $(dom).attr("width");
                   var height = $(dom).attr("height");
                   var src = $('embed', dom).attr('src');
                   
                   var html = "<img class='youtube' src='/~petha443/sif/Directory/images/youtube.jpg'"
                   + " alt='" + src + "'"
                   + " height='" + height +"'"
                   + " width ='" + width + "'"
                   + "/>";
                   wym.insert(html);
                   return(false);
                  });
               }
          });


On pages were the "youtube-image" appears i can then replace it with the following javascript:

Code: Select all

   $(".youtube").each(function() {
   var height = $(this).attr("height");
   var width = $(this).attr("width");   
   $(this).replaceWith("<object width='"
   + width
   + "' height='"
   + height + "'><param name='movie' value='"
   + $(this).attr("alt")
   +"'></param><param name='allowFullScreen' value='true'></param><param name='allowscriptaccess' value='always'></param><embed src='"
   + $(this).attr("alt")
   + "' type='application/x-shockwave-flash' allowscriptaccess='always' allowfullscreen='true' width='"
   + width +  "' height='"
   + height  + "'></embed></object>");
   });
   

[shacker]

Hey Petha - Thanks much for the response, interesting. That's a crazy amount of customization for a simple thing though. I'm looking for a list of "safe" tags that I can edit somewhere. Shouldn't I be able to just say "<object>" is safe and leave it at that? Doesn't such a thing exist?

Also, your javascript solution does not degrade well for non-javascript end users...

[shacker]

I should add that we're not dealing with off-site media here but our own .mov and .swf files that we simply want to embed. We don't need the code generated - we've got the embed code ready to go (coming out of Dreamweaver or other tools). We just want it to be left alone.

[mr_lundis]

Take a look at this blog post by Simon Woodside.

Cheers!

[mr_lundis]

I found myself with some time over last night, so I decided to try to implement Simon Woodside embed patch as a WYMeditor plug-in. The plug-in is rather experimental, be warned.

If you want to try it out, grab a fresh copy of the trunk and open up the embed.html inside the test directory or add the jquery.wymeditor.embed.js file to your WYMeditor page.

Current issues:
- The closing object tag gets striped out. The same thing occurs using a patched version of WYMeditor (without the plug-in.)
- The editor isn't handling objects/embeds very well, the code needs to be inserted in html/source mode.

Please feel free to come with improvements.

Cheers!

Edit:
Just to clarify, this isn't an official embed plug-in for WYMeditor, just a workaround (or whatever you'd like to call it) to enable embeds in WYmeditor. A progressive enhancement approach (like what petha443 is talking about) is still the recommended way of doing this.

[shacker]

Thanks for putting in the effort! However I'm having trouble getting this version to work at all. Getting this error:

Error: WYMeditor.WymClassMozilla is not a constructor
Source File: http://127.0.0.1:8000/media/js/wymedito ... meditor.js
Line: 712

Has something changed in the project layout? Looks like there are some new browser-specific files that weren't there before (.mozilla, .opera., explorer)...

[mr_lundis]

If you're not using a built version of WYMeditor you'll need to include all the browser specific classes for the editor to work (or just run make to build the editor yourself.)

Cheers!

[foror]

Add to WYMeditor.XhtmlValidator (in src):

Code: Select all

   
"embed":
    {
      "attributes":
      {
        "0":"width",
        "1":"height",
        "2":"allowfullscreen",
        "3":"wmode",
        "4":"type",
        "5":"src",
      }
    },

and edit "param" for new record "3":"name"

Code: Select all

    "param":
    {
      "attributes":
      {
        "0":"type",
        "valuetype":/^(data|ref|object)$/,
        "1":"valuetype",
        "2":"value",
        "3":"name"
      },


Also finding this.block_tags and insert "embed". Move "param" to this.inline_tags from this.block_tags .

And build button plugin for insert youtube embed code (look wymeditor examples) or insert it after click "src button" on wymeditor panel.