Embedding a Youtube Video on EPiServer

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…