Skip to main content

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
  4. Where are the parameter data stored?

    I'm getting all blanks after following the above instructions (on umbraco v 4.7.1.1)

    i.e.
    < iframe width="" height="" frameborder="0" type="text/html" src="">
    < html>
    < head>
    < /head>
    < body>
    < /body>
    < /html>
    < /iframe>

    (note that I had to insert a blank character in each tag so the editor for this blog wouldn't block me!)

    ReplyDelete
    Replies
    1. Here's the HTML from the macro: (again with bogus blanks)

      < div umb_source="https://www.google.com/maps/d/embed?mid=1LtwYDvm0LxaZHdNbBlschzUtTw0" umb_width="450" umb_macroalias="IFrameInsert" umb_height="" ismacro="true" onresizestart="return false;" umbversionid="5f7ed475-896d-4af3-9713-f647982d42cf" umbpageid="1112" title="This is rendered content from macro" class="umbMacroHolder">Sorry, your browser does not support IFRAMES < /div>

      So the paerameter data are there but not rendering! Any ideas?

      Many thanks
      NN

      Delete

Post a Comment

Popular posts from this blog

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

This is a Simple Contact From done in C# .Net and also can be used in Umbraco.  Paste the code in to Visual Web Developer for a better view. The important bits are coment in the second file.  One of the Commented out lines highlights how to get the mailto address from an Umbraco field. The code Below includes the myContactForm.ascx.cs codebehind file and the myContactForm.ascx file. 1) The myContactForm.ascx file:  <%@ Control Language="C#" AutoEventWireup="true" CodeFile="ContactFormforPublications.ascx.cs" Inherits="usercontrols_ContactFormPublications" %> <div class="contact-form" id="contactForm" runat="server">     <h3>Request a Publication</h3>     <div class='int'>         <form runat="server">         <asp:Panel DefaultButton="contactFormSubmit" runat="server">         <fieldset>             <div class='

Umbraco 7 - C# Razor - Passing a parameter variable from a Template to a Partial View.

Passing a parameter variable from a Template to a Partial View Example - Passing a Page Id to a Partial View. In the example below we are passing 3 page Ids (1090. 1091, 1092) to a partial view.  The Partial View will display the details for each of these nodes on a home page.  See final output below. 1) In your Template: @Html.Partial("HomePageLinksToLandingPages", new ViewDataDictionary{{ "pageId", 1090}}) @Html.Partial("HomePageLinksToLandingPages", new ViewDataDictionary{{ "pageId", 1091}}) @Html.Partial("HomePageLinksToLandingPages", new ViewDataDictionary{{ "pageId", 1092}}) 2) The Partial View: @inherits Umbraco.Web.Mvc.UmbracoTemplatePage @{ var thisPageId = 1090; var stringPage = @ViewData["pageId"]; thisPageId = Convert.ToInt32(stringPage); } <div class="col-md-4"> <arti