Forum closed. New forum available at http://community.wymeditor.org/

Embedding HTML code with WYMeditor

Support forum for WYMeditor.

Embedding HTML code with WYMeditor

Postby devijvers on Tue Jun 12, 2007 3:04 pm

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
devijvers
 
Posts: 1
Joined: Tue Jun 12, 2007 12:23 am

Postby Daniel_R on Tue Jun 12, 2007 3:38 pm

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/
Daniel_R
 
Posts: 10
Joined: Wed Sep 27, 2006 12:19 pm


Return to Support

Who is online

Users browsing this forum: Google [Bot] and 2 guests

cron