Hi Paul

I think the easiest way to be able to insert a youtube video is by using the uTube package, which allows you to insert a macro in the rich text editor where you can place the youtube link.

Hope this helps.

/Jan

Will this resolve to where why everytime i try to publish a page, the macro would dissapear?

Paul

Hi Jan, I installed the uTube package and I am getting the same results, the TinyMCE keeps removing the embed / iframe tags after publishing the page. 

Hi Paul

Hmm, that sounds odd...

You do insert it as a macro in the rich text field, right?

What does the xslt code look like? Could you paste it in here perhaps?

/Jan

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [
  <!ENTITY nbsp "&#x00A0;">
]>
<xsl:stylesheet
  version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:msxml="urn:schemas-microsoft-com:xslt"
  xmlns:umbraco.library="urn:umbraco.library"
  xmlns:atom="http://www.w3.org/2005/Atom"
  xmlns:yt="http://gdata.youtube.com/schemas/2007"
  xmlns:media="http://search.yahoo.com/mrss/"
  xmlns:uTube.XSLT="urn:uTube.XSLT"
  exclude-result-prefixes="msxml umbraco.library atom yt media uTube.XSLT">

  <xsl:output method="xml" omit-xml-declaration="yes"/>

  <xsl:param name="currentPage"/>

  <xsl:template match="/">

    <!-- YouTube URL or VideoID -->
    <xsl:variable name="uTubeVideo"       select="/macro/uTubeVideo" />                         
    
    <!-- Don't do anything unless we have a value in uTubeVideo -->
    <xsl:if test="/macro/uTubeVideo">
      <xsl:variable name="uTubeVideoID"   select="uTube.XSLT:GetVideoId($uTubeVideo)" />          <!-- Video ID from YouTube URL -->
      <xsl:variable name="uTubeXML"       select="uTube.XSLT:GetVideoData($uTubeVideoID, 60)"/>   <!-- 1 minute Cache -->
      <xsl:variable name="uTubeRatio"     select="uTube.XSLT:GetAspectRatio($uTubeVideoID)"/>     <!-- Gets Aspect ratio of video (widescreen or standard)-->

      <!-- Video Width -->
      <xsl:variable name="uTubeWidth">
        <xsl:choose>
          <!-- If the Width is not set, then check if Height is available -->
          <xsl:when test="not(/macro/uTubeWidth) and /macro/uTubeHeight">
            <!-- Use the Height to get the Width -->
            <xsl:value-of select="uTube.XSLT:GetVideoWidth(/macro/uTubeHeight, $uTubeRatio)" />
          </xsl:when>
          <!-- If the Width is set, use it! -->
          <xsl:when test="/macro/uTubeWidth">
            <xsl:value-of select="/macro/uTubeWidth" />
          </xsl:when>
          <!-- Otherwise fall back on a default value -->
          <xsl:otherwise>
            <xsl:value-of select="number(480)" />
          </xsl:otherwise>
        </xsl:choose>
      </xsl:variable>

      <!-- Video Height -->
      <xsl:variable name="uTubeHeight">
        <xsl:choose>
          <!-- If the Height is not set -->
          <xsl:when test="not(/macro/uTubeHeight)">
            <!-- Then use the Width to get the Height -->
            <xsl:value-of select="uTube.XSLT:GetVideoHeight($uTubeWidth, $uTubeRatio)" />
          </xsl:when>
          <xsl:otherwise>
            <!-- Otherwise use the user-defined value -->
            <xsl:value-of select="/macro/uTubeHeight" />
          </xsl:otherwise>
        </xsl:choose>
      </xsl:variable>


      <!-- I don't like inline styles but we need to -->
      <div class="youTubePlayer" style="height:{$uTubeHeight}px; width:{$uTubeWidth}px;">
        <xsl:choose>
          <xsl:when test="uTube.XSLT:AllowEmbed($uTubeVideoID) = true()">
            <!-- Video is allowed to be embedded -->
            <div id="{concat('ytPlayerAPI-',$uTubeVideoID)}">
              <p>You need Flash version 8 and JS enabled to view the video</p>
            </div>

            <!-- SWFObject call to Embed Chromless player -->
            <script type="text/javascript">
              //SWF Embedd
              var flashVars   = {video_id : "<xsl:value-of select="$uTubeVideoID"/>", playerapiid: "<xsl:value-of select="concat('ytPlayerAPI-',$uTubeVideoID)" />" }
              var params      = { allowScriptAccess: "always", wmode: "transparent" };
              var atts        = { id: "<xsl:value-of select="concat('ytPlayerAPI-',$uTubeVideoID)" />" };
              swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&amp;version=3&amp;playerapiid=<xsl:value-of select="concat('ytPlayerAPI-',$uTubeVideoID)" />","<xsl:value-of select="concat('ytPlayerAPI-',$uTubeVideoID)" />", "<xsl:value-of select="$uTubeWidth" />", "<xsl:value-of select="$uTubeHeight"/>", "8", null, flashVars, params, atts);
            </script>

            <!-- Controls -->
            <div class="muteControl mute">&nbsp;</div>
            <div class="controlDiv">&nbsp;</div>
            <div class="progressBar">
              <div class="elapsed">
                <xsl:comment></xsl:comment>
              </div>
            </div>
          </xsl:when>
          <xsl:otherwise>
            <!-- Video Not Allowed to be embedded -->
            <p>This video does not allow it to be embedded.</p>
          </xsl:otherwise>
        </xsl:choose>
      </div>
    </xsl:if>

  </xsl:template>
</xsl:stylesheet>

When you copy in the YouTube embed code. Are you putting in any other code with the Embed or iFrame code?  We have had luck with just using the Embed code but not the iFrame code. We made a Macro that handles the iframe and the user would put in the ID of the YouTube video as a Macro Parameter, that way the Macro handled the code.

That is another idea.

We too have ran into many problems embedding not just YouTube videos or iFrames, but other types of custom HTML, javascript, 3rd party widgets, etc. without TinyMCE trampling all over it. Even trying to create a macro allowing custom parameters causes problems sometimes when the parameter needs to contain special characters, as TinyMCE keeps wanting to render them or convert them or break them. (For example, ever try to include a quotation mark character in one of your macro parameters, then you will know what I mean!)

So, we ended up creating a very simple two-pronged approach which has been working quite well for us so far. We call it the "WidgetDropper" (because it drops a widget into the middle of your richtext editor!) and i'm thinking I should try to release it as a package if anyone finds it helpful. Here's the basic approach:

1. We created two new document types, widgetContainer and widget:
 * The widgetContainer doctype has a "folder" icon and simply serves to organize all of the site widgets. It has no properties of its own.
 * The widget doctype has a single textarea property (a.k.a. "Textbox multiple") called "html". The structure allows you to create these only within the widgetContainer.

2. We created a standalone content node (of type widgetContainer) called "Widgets", and then under this our first widget called Sample YouTube Video. It is very easy to just copy/paste the entire YouTube embed code into this widget node and then save/publish. Same thing for twitter or facebook feeds, etc. (Make sure your site navigation scripts don't include these widgets or their container in your nav bars! These nodes are not intended to be directly "surfable", i.e., they don't even have their own templates.)

3. Now the fun part is to create a macro and corresponding Razor script we call the "WidgetDropper". It has a single parameter which is just the NodeID of the widget you wish to render. Allow this macro to be used in the TinyMCE editor. The trick was that when we coded the WidgetDropper script, we only actually render the widget's HTML if it is NOT being called by the "macroResultWrapper"---which is the ajaxy way that umbraco uses to actually execute/render scripts inside of the editor. So, to put it another way: if the macro gets executed whilst in the context of the TinyMCE editor, we just display a placeholder that says so. (This avoids the editor getting confused and stripping away the iframes etc.) In all other cases, i.e., when executing OUTSIDE of the tinymce editor, we just dump (via @Html.Raw) whatever the widget's HTML indicates. It works beautifully!

NOTE: it is also possible to decide to just not check the "Render content in editor" box when you create such a macro, but we didn't like that approach as much as displaying our own custom placeholder. This was to avoid the otherwise boring "No macro content available for WYSIWYG editing" message, which simply confuses our users and isn't as helpful as actually indicating which particular widget is going to be shown there.

So, not sure if anyone will find this same approach helpful but we certainly do. Hopefully at least, the description i've given here will allow anyone to recreate such a solution for themselves. One additional bonus is if you have the same type of widget (movie, feed, whatever) that appears in a few different places on the site, you only need to maintain this in one place and then can insert wherever you want with minimal duplication.

Good luck!

Funka,

Please do post that as a package. This sounds like an excellent solution to tons of problems with the TinyMCE.  I can understand a few of the needs to not allow <script> tags and such but at the same time it is extremely painful when you just want an iFrame or something that we want to show up in the content directly without having to make separate macros for each video, iframe, etc.  TinyMCE seems to strip out WAY too much.  Even when I have tried to go into the .config for it to add some other properties to accept, it still strips them out.  I look forward to seeing it in the Projects area.

Thanks

Check out the new Widget Dropper package, released just moments ago!

Best regards!

is working on a reply...