Embedding a Youtube Video on EPiServer

Embedding youtube video

Several pages in our website require embedded Youtube videos. So I created a Youtube block that accepts the following Content properties:

  • Title
  • Description
  • Embed link

While it’s Settings properties are:

  • Width
  • Height
  • Allow Full Screen
  • Auto Play

Here’s my code for the model:

 public class YoutubeBlock : BlockData  
 {  
      [Display(  
           Name = "Title",  
           GroupName = SystemTabNames.Content,  
           Order = 10)]  
      public virtual string VideoTitle { get; set; }  
      [Display(  
           Name = "Description",  
           GroupName = SystemTabNames.Content,  
           Order = 20)]  
      public virtual string Description { get; set; }  
      [Display(  
           Name = "Url to Youtube Video",  
           GroupName = SystemTabNames.Content,  
           Order = 30)]  
      [Required]  
      public virtual Url YoutubeLink { get; set; }  
      [Display(  
           Name = "Width",  
           GroupName = SystemTabNames.Settings,  
           Order = 10)]  
      public virtual int Width { get; set; }  
      [Display(  
           Name = "Height",  
           GroupName = SystemTabNames.Settings,  
           Order = 20)]  
      public virtual int Height { get; set; }  
      [Display(  
           Name = "Allow Full Screen?",  
           GroupName = SystemTabNames.Settings,  
           Order = 30)]  
      public virtual bool AllowFullScreen { get; set; }  
      [Display(  
           Name = "Auto Play?",  
           GroupName = SystemTabNames.Settings,  
           Order = 40)]  
      public virtual bool AutoPlay { get; set; }  
      public override void SetDefaultValues(ContentType contentType)  
      {  
           this.AllowFullScreen = true;  
           this.AutoPlay = false;  
           this.Width = 520;  
           this.Height = 292;  
      }  
 }  

Nothing special with my controller:

 public class YoutubeBlockController : BlockController<YoutubeBlock>  
 {  
      public override ActionResult Index(YoutubeBlock currentBlock)  
      {  
           return PartialView(currentBlock);  
      }  
 }  

And then my View:

 @model YoutubeBlock  
 <div class="youtubediv">  
   @if (String.IsNullOrEmpty(Model.VideoTitle))  
   {  
     <h3>@Html.PropertyFor(y => y.VideoTitle)</h3>  
   }  
   @if (String.IsNullOrEmpty(Model.Description))  
   {  
     <p>@Html.PropertyFor(y => y.Description)</p>  
   }  
   @{  
     var youtubeLink = Model.YoutubeLink.OriginalString;  
     if (Model.AutoPlay)  
     {  
       youtubeLink += ((youtubeLink.Contains("?")) ? "&" : "?") + "autoplay?=1";  
     }  
     var allowFullScreen = Model.AllowFullScreen ? "allowfullscreen" : "";  
   }  
   <iframe width="@Model.Width" height="@Model.Height" src="@youtubeLink" @allowFullScreen style="border: none;"></iframe>  
 </div>  

The recommended way of embedding video is to use the iframe. However, you can also use the elements Object and Embed as per W3schools.

Meanwhile on the EPiServer CMS Edit mode…

 

 

Using XForms in EPiServer 8 MVC

Ha, another milestone for me – I was able to create an XForm in EPiServer and hook it up to a block!

First step I took:  Create a Form block, which consists of the following properties:

 public class FormBlock  
{
public virtual string Heading { get; set; }
public virtual XForm Form { get; set; }
[Ignore]
public virtual string ActionUri { get; set; }
}

And then create a controller that populates the ActionUri property. Here is what it looks like:

 public class FormBlockController : BlockController<FormBlock>  
{
private readonly PageRouteHelper pageRouteHelper;
public FormBlockController(PageRouteHelper pageRouteHelper)
{
this.pageRouteHelper = pageRouteHelper;
}
public override ActionResult Index(FormBlock currentBlock)
{
// Create postback url
if (currentBlock.Form != null && this.pageRouteHelper.Page != null)
{
var actionUri = "XFormPost/";
actionUri = UriSupport.AddQueryString(actionUri, "failedAction", "Failed");
actionUri = UriSupport.AddQueryString(actionUri, "successAction", "Success");
currentBlock.ActionUri = actionUri;
}
return PartialView(currentBlock);
}
}

The view is short and simple:

 @model FormBlock  
<h2 @Html.EditAttributes(m => m.Heading)>@Model.Heading</h2>
@using (Html.BeginXForm(Model.Form, new { Action = Model.ActionUri}))
{
Html.RenderXForm(Model.Form);
}

2nd step: Create a Page Type where one of it’s properties is the newly created Form block

 public class FormPage  
{
public virtual FormBlock FormBlock { get; set; }
}

And then create the Controller. Since the ActionUri in the Form block has been set to “XFormPost/”, we create that Action method as you can see below. I have also added Success and Failed actions that need to be further implemented. But for now, we leave it as is.

 public class FormPageController : PageControllerBase<FormPage>  
{
private readonly XFormPageUnknownActionHandler _xformHandler;
private string _contentId;
public FormPageController()
{
_xformHandler = new XFormPageUnknownActionHandler();
_contentId = string.Empty;
}
public ActionResult Index(FormPage currentPage)
{
var model = new PageViewModel<FormPage>(currentPage);
return View(model);
}
[AcceptVerbs(HttpVerbs.Post)]
public virtual ActionResult XFormPost(XFormPostedData xFormpostedData, string contentId)
{
_contentId = contentId;
return _xformHandler.HandleAction(this);
}
#region Success and failed actions
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Success(FormPage currentPage, XFormPostedData xFormPostedData)
{
var model = new PageViewModel<FormPage>(currentPage);
return View("Success", currentPage);
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Failed(FormPage currentPage, XFormPostedData xFormPostedData)
{
var model = new PageViewModel<FormPage>(currentPage);
return View("Failed", currentPage);
}
#endregion
}

And finally the View:

 @model PageViewModel<FormPage>  
@{
Layout = "~/Views/Shared/Layouts/_SomeLayout.cshtml";
}
<div class="row">
@Html.PropertyFor(p => p.CurrentPage.FormBlock)
</div>
<div class="row">
@Html.PropertyFor(p => p.CurrentPage.NonTextContent)
</div>

3rd step: Run and create an instance of the Form Page. On the Form block, you can choose which XForm to use in the block.

Or you can also create a new one if needed.