Embedding HTML code with WYMeditor

[devijvers]

Hey,

How can I embed prepared HTML code with WYMeditor like the code for including a YouTube video or any other flash application?

Thanks

Steven

[Daniel_R]

Hi,

Here is the technique I use to embed videos, using WYMeditor.
You can adapt it for your needs.

I place the videos in a directory named "videos".
In this directory, for each video, there are 2 files:

1 "myvideo.flv"
2 "myvideo.jpg"

So when using WYMeditor, the user simply inserts the image "myvideo.jpg".
Then you use a transformation, client-side or server side to replace the code produced by WYMeditor (the img tag) by the code you want.


I use JQuery to do this transformation.
Here is my code, which replaces images by the code needed to show the video:

Code: Select all


//REPLACE IMAGES BY VIDEOS
$(document).ready(function(){
        $('img[@src*="/files/videos/"]')
            .each(
                function(){
                    videoWidth      = $(this).attr("width");                                   
                    videoHeight     = parseInt($(this).attr("height"))+20;
                    videoSrc        = $(this).attr("src").replace(".png",".flv").replace(".jpg",".flv").replace(".gif",".flv");                               
                    imagePreviewSrc = $(this).attr("src");
                    $(this).flash(
                        { src: '/shared/flvplayer/flvplayer.swf', height: videoHeight, width: videoWidth},
                        { version: 7 },
                        function(htmlOptions) {
                            htmlOptions.flashvars.file = videoSrc;
                            htmlOptions.flashvars.image = imagePreviewSrc;
                            htmlOptions.flashvars.autostart = true;
                            htmlOptions.flashvars.showfsbutton = false;
                            $(this).before($.fn.flash.transform(htmlOptions));                  
                        }
                    );
                }
            )
            .remove();
    });



You can see an example of implementation here:
http://www.carboneplus.be/fr/produits-d-isolation/pytec/