Umbraco Macro for IFrame when Embedding Video, Vimeo Universal Player, or other types of IFrame on to a Page XSLT version and Razor Version

Vimeo Uneversal Player is cross platform compatiable, and uses IFrames, so you need a Macro to Embedd a video from Vimeo in to Umbraco:

Part A: Create the XSLT File and Macro  (If you want to use Razor instead of xslt, the Razor code is at the bottom of this post)

1) Create a New Clean XSLT File and tick Create Macro.

2) Give the Macro a Name, such as: Vimeo IFrame Embedd for Vimeo Universal Player

3) Paste in the following Code:

<?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"
    exclude-result-prefixes="msxml umbraco.library">

<xsl:output method="xml" omit-xml-declaration="yes"/>
<xsl:param name="currentPage"/>
<xsl:variable name="location" select="/macro/location"/>
<xsl:variable name="width" select="/macro/width"/>
<xsl:variable name="height" select="/macro/height"/>
<xsl:template match="/">
<iframe src="{$location}" width="{$width}" height="{$height}">
Sorry, your browser does not support IFRAMES
</iframe>
</xsl:template>
</xsl:stylesheet>

Note:  The above line  "Sorry, your browser does not support IFRAMES" is important.  You need to have some content in here.  If you do not, for some reason, the rest of the HTML on a page will not be rendered.

Part B: Add Paramaters to the Macro

1) Save your XSLT file.

2) Go to the Macro Section and in the new macro add the following 3 paramaters, all of which are of Type text:

Alias and Name:
  • location  
  • width
  • height

Tick "Use In Editor"

3) Save the Macro

Part C: Using the Macro to Embedd the Vimeo Video on the Umbraco Page

1) Go to the umbraco content page you want to embedd the iframe video on to.

2) Click on the Macro button and select the new macro from the drop down.

3) For the location, paste in the URL of the Video.  Such as:
http://player.vimeo.com/video/40514689 (Which you get from your IFrame Code)

5) Enter your required width and height.

6) Save and Publish your page.  You will need to log out of Vimeo to test this or the Vimeo page will open instead of the video.

Razor Code for adding Paramaters/Embedfing Vimeo and You tube Video in Umbraco:




<iframe src="@Parameter.linkToMainVideo">
Sorry, your browser does not support IFRAMES
</iframe>



Comments

  1. Mark -

    This is awesome. Thanks for posting this code; it is nice and succinct and works perfect.

    Thanks!

    ReplyDelete
  2. Hi D,

    Thank you for the positive comment. Very much appreciated.

    Thanks,
    Mark

    ReplyDelete
  3. Sweet! Very simple and uncomplicated. There are so many tutorials out that give you a cluster bomb of code that if you don't "get it," you basically slap it in there and hope for the best.

    I was able to take your code and integrated it exactly how I needed!

    Thanks a bunch for sharing!

    ReplyDelete

Post a Comment

Popular posts from this blog

Umbraco Razor Sort Nodes Ascending or Descending

Umbraco Razor get Querystring

Create a .NET Contact Form that Gets the Last Url Visited in C# Can also be Used in Umbraco