New#120: [Enhancement] Add the ability to add videos safely in the forum

I was thinking it would be beneficial to give our users the ability to post tutorial videos via embed from screenr, vimeo, or youtube, but without letting them post the embed code…

But maybe we could have a utility on the website that looks for something like… {{video::http://vimeo.com/15234803}} which would then have a utility that looks for that, and then changes it into the proper embed code… there by keeping the users from using iframe or embed code in the forum textareas.

What do y’all think?

Actually, I tried out a possible solution (just as long as this Symphony-CMS site uses the Allen’s Ninja technique). I have this working for Vimeo and YouTube. It’s assuming the user inputs a vimeo video or youtube video like so… {{video::http://vimeo.com/15234803}}

<xsl:template match="p[contains(.,'{{video::')]" mode="html">
        <xsl:param name="video" select="substring-before(substring-after(.,'{{video::'),'}}')"/>
        <xsl:param name="video-id">
            <xsl:choose>
                <xsl:when test="contains($video,'youtube.com/watch?v=')">
                    <xsl:value-of select="substring-after($video,'youtube.com/watch?v=')"/>
                </xsl:when>
                <xsl:when test="contains($video,'youtube.com/v/')">
                    <xsl:value-of select="substring-after($video,'youtube.com/v/')"/>
                </xsl:when>
                <xsl:when test="contains($video,'vimeo.com')">
                    <xsl:value-of select="substring-after($video,'vimeo.com/')"/>
                </xsl:when>
            </xsl:choose>
        </xsl:param>
        <xsl:param name="width" select="'100%'"/>
        <xsl:param name="height" select="'500'"/>
        <xsl:param name="color" select="'ffffff'"/>
        <xsl:param name="title" select="'1'"/>
        <xsl:param name="byline" select="'0'"/>
        <xsl:param name="portrait" select="'0'"/>
        <xsl:param name="frameborder" select="'0'"/>

        <div class="video-container">
            <xsl:choose>
                <xsl:when test="contains($video,'youtube.com')">
                    <iframe class="youtube-player" type="text/html" width="{$width}" height="{$height}" src="http://www.youtube.com/embed/{$video-id}" frameborder="0">
                        <xsl:comment> You Tube Player </xsl:comment>
                    </iframe>
                </xsl:when>
                <xsl:when test="contains($video,'vimeo.com')">
                    <iframe class="vimeo-player" type="text/html" width="{$width}" height="{$height}" src="http://player.vimeo.com/video/{$video-id}?title={$title}&amp;byline={$byline}&amp;portrait={$portrait}&amp;color={$color}" frameborder="{$frameborder}">
                        <xsl:comment> Vimeo Player </xsl:comment>
                    </iframe> 
                </xsl:when>
            </xsl:choose>
        </div>

    </xsl:template>

After chatting with Allen, I agree it would be best NOT to create custom syntax like {{video:}}, but to use a pure XSLT solution. I adjusted the utility from above, to look for http://youtube.com or http://vimeo.com urls and replace them with a player. Here’s what I came up with, it’s not perfect by any means. If anyone can improve this, please take a look at it.

<xsl:template match="text()[contains(.,'youtube.com/watch?v=') or contains(.,'youtube.com/v/') or contains(.,'vimeo.com/')]" mode="html">
        <xsl:param name="video" select="."/>
        <xsl:param name="video-id">
            <xsl:choose>
                <xsl:when test="contains($video,'youtube.com/watch?v=')">
                    <xsl:value-of select="substring-after($video,'youtube.com/watch?v=')"/>
                </xsl:when>
                <xsl:when test="contains($video,'youtube.com/v/')">
                    <xsl:value-of select="substring-after($video,'youtube.com/v/')"/>
                </xsl:when>
                <xsl:when test="contains($video,'vimeo.com')">
                    <xsl:value-of select="substring-after($video,'vimeo.com/')"/>
                </xsl:when>
            </xsl:choose>
        </xsl:param>
        <xsl:param name="width" select="'100%'"/>
        <xsl:param name="height" select="'500'"/>
        <xsl:param name="color" select="'ffffff'"/>
        <xsl:param name="title" select="'1'"/>
        <xsl:param name="byline" select="'0'"/>
        <xsl:param name="portrait" select="'0'"/>
        <xsl:param name="frameborder" select="'0'"/>

        <div class="video-container">
            <xsl:choose>
                <xsl:when test="contains($video,'youtube.com')">
                    <iframe class="youtube-player" type="text/html" width="{$width}" height="{$height}" src="http://www.youtube.com/embed/{$video-id}" frameborder="0">
                        <xsl:comment> You Tube Player </xsl:comment>
                    </iframe>
                </xsl:when>
                <xsl:when test="contains($video,'vimeo.com')">
                    <iframe class="vimeo-player" type="text/html" width="{$width}" height="{$height}" src="http://player.vimeo.com/video/{$video-id}?title={$title}&amp;byline={$byline}&amp;portrait={$portrait}&amp;color={$color}" frameborder="{$frameborder}">
                        <xsl:comment> Vimeo Player </xsl:comment>
                    </iframe> 
                </xsl:when>
            </xsl:choose>
        </div>

    </xsl:template>

Please login to comment.

Symphony • Open Source XSLT CMS

Server Requirements

  • PHP 5.3-5.6 or 7.0-7.3
  • PHP's LibXML module, with the XSLT extension enabled (--with-xsl)
  • MySQL 5.5 or above
  • An Apache or Litespeed webserver
  • Apache's mod_rewrite module or equivalent

Compatible Hosts

Sign in

Login details