Responsive iFrame - Layout Snippet

Responsive iFrame - Layout Snippet

Layout Snippets it's one of my favourites features of Orchard. Orchard 1.10 provides parameterizable snippets, that are more powerful. In this post, I will create a responsive iFrame parameterizable snippet. iFrames are very useful to websites, for example, a YouTube video or a Google Map. You can get the HTML of an iFrame and you can post it to your website, but it will not be responsive. 

First of all, we have to install Bootstrap to our website. After this, we will a create a cshtml file in the Views folder of our theme, with the name ResponsiveIframeSnippet

@using Orchard.Layouts.Helpers
<div class="embed-responsive embed-responsive-4by3">
    <iframe class="embed-responsive-item"
        src="@Html.SnippetField("URL").DisplayedAs(T("Iframe URL")).WithDescription(T("Enter here the Iframe url of your provider"))"
        frameborder="0" allowfullscreen>
</iframe>
</div>

Now we can drag the Responsive iFrame Snippet wherever we want. 
 

We will add the iFrame URL and click Save.

 

The result of this example looks like this.


You can download the above file from GitHub, you can add it to the Views folder of your theme and you are ready.