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 " "> ]>
<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:
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.
<iframe src="@Parameter.linkToMainVideo">
Sorry, your browser does not support IFRAMES
</iframe>
<!DOCTYPE xsl:Stylesheet [ <!ENTITY nbsp " "> ]>
<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: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.
- location
- width
- height
http://player.vimeo.com/video/40514689 (Which you get from your IFrame Code)
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>
Mark -
ReplyDeleteThis is awesome. Thanks for posting this code; it is nice and succinct and works perfect.
Thanks!
Hi D,
ReplyDeleteThank you for the positive comment. Very much appreciated.
Thanks,
Mark
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.
ReplyDeleteI was able to take your code and integrated it exactly how I needed!
Thanks a bunch for sharing!
Nice and brief :)
ReplyDelete