Some of the source code from my vizipres spike. This file is an object I would use as a base if my editable cards.

CardBodyGUI.js

var CardBodyGUI = function() {

        var GUI = {};
        var editTitleText = {};
        var staticHeaderText = {};
        var imgHolder = {};
        var video = {};
        var editBodyText = {};
        var staticBodyText = {};
        
        init();

        function init() {
            
            GUI = $('<div/>', {
                "class": "info-card-body"
            });

            editTitleText = $('<textarea/>', {
                text: "Edit your title!",
                "class": "editHeaderText"
            });

            staticHeaderText = $('<h1/>', {
                "class": "staticHeaderText",
                text: "Change your title here..."
            });

            imgHolder = $('<img/>', {
                "class": "imageHolder"
            });

            video = $('<iframe/>',{
                "src" : "",
                "class" : "video",
                "frameborder" : "0",
                "webkitallowfullscreen" : "",
                "mozallowfullscreen" : "",
                "allowFullScreen" : ""
            });

            editBodyText = $('<textarea/>', {
                text: "Adjust your text here...",
                "class": "editBodyText"
            });

            staticBodyText = $('<p/>', {
                "class": "staticBodyText",
                text: "some text...."
            });

            addGUI();
            showEditState();
            hideMedia();
        }

        function addGUI () {
            GUI.append(staticHeaderText);
            GUI.append(editTitleText);
            GUI.append(imgHolder);
            GUI.append(video);
            GUI.append(staticBodyText);
            GUI.append(editBodyText);
        }

        function showEditState() {
            staticHeaderText.hide();
            staticBodyText.hide();

            editBodyText.show();
            editTitleText.show();
        }

        function hideMedia () {
            imgHolder.hide();
            video.hide();
        }

        function saveChanges () {
            staticHeaderText.html(editTitleText.val());
            staticBodyText.html(editBodyText.val());
        }

        function showViewState () {
            staticHeaderText.show();
            staticBodyText.show();

            editBodyText.hide();
            editTitleText.hide();
        }

        function showUploadedImg (file,callback) {
            imgHolder.hide("fast");   
            imgHolder.attr('src', file);
            imgHolder.fadeIn('fast', function() {
                callback();
            });
        }

        function hideUploadedImg (callback) {
            imgHolder.fadeOut('slow', function() {
                callback();
            });
        }

        function showVideo (videoType) {
            var url = "http://player.vimeo.com/video/";

            if (videoType.type == "youtube"){
                url = "http://www.youtube.com/embed/";
            }

            video.attr("src",url + videoType.videoID);
            video.fadeIn('fast');
        }

        function hideVideo () {
         video.fadeOut('fast', function() {
             video.attr("src","");;
         });
         ;
        }

        function toggleVideoWidth  () {
           video.toggleClass('videoWide');
        }

        return {
            GUI: GUI,
            showEditState : showEditState,
            saveChanges : saveChanges,
            showUploadedImg : showUploadedImg,
            hideUploadedImg : hideUploadedImg,
            showVideo : showVideo,
            hideVideo : hideVideo,
            toggleVideoWidth : toggleVideoWidth,
            showViewState:showViewState
        };
    };