Embedding Responsive YouTube Videos into Sitecore

Recently we had a content author who had embedded some YouTube videos onto their Sitecore pages and visited them using their mobile phone. Much to their dismay, the video wasn’t responsive and was cut-off to the right of the screen.

At the time of this writing, YouTube didn’t have a responsive embed code that we could just copy and paste so we took to google and found Embed Responsively, who makes it easy.

Now, TechGuilds as a Sitecore Implementation Partner with many Sitecore Craftsmen and developer expertise could have coded something to make it work, but wanted to give our client a fast and self-sufficient solution. Besides, we didn’t think it was necessary to reinvent the wheel and cost our client valuable time and money.

All-in-one Responsive Embed Option

1. From YouTube, copy the Video URL you want to embed on your page. (Don’t use share; it’s not required for this)
   
   

   

2. Visit www.EmbedResponsively.com and paste the URL into the input box and click the Embed button.
   
   

   

3. At the bottom of the displayed video, copy the style-based embed code.
   
   

   

4. Log into the Sitecore Content Editor and select the page on which you want the video embedded.
   
   

   

5. Open the Rich Text field in HTML mode by clicking the Edit HTML option.
   
   

   

6. Position the cursor where you want the video to appear on the page and paste in the embed code.
   
   

   

7. Accept, Save and Publish your page and test on your mobile or emulator within your browser.
   
   

   

That’s it! Quicker and easier than writing this blog post 😊

Advanced Option

If you would like the ultimate control over the video so that it is a specific width and height on the desktop, and is still responsive on the mobile, here is how:

1. Follow Steps 1 to 6 above.
2. Copy the following code “@media only screen and (max-width: 768px) {“, without the quotes
3. Place it after “<style>” and before “.embed-container” of the responsive code.
   
   

   

4. Add a closing curly brace “}” after “height: 100%; }” and before “</style>”.
   It should look like this “height: 100%; }}</style>” with two curly braces before the closing “</style>” tag.
   
   

   

Add your width and height after "<iframe " – in our example, it looks like “<iframe width="400" height="225"…”

Accept, Save and Publish your page and test on both your mobile and desktop.

The mobile version will remain responsive, but the size of the desktop video changes.

Until next time, if you haven’t already done so, check out our productivity for marketers and content authors series.

Addendum:

Since this article was originally posted, we had a request on how to embed responsive YouTube videos on AMP (Accelerated Mobile Pages). Thank you Sitecore MVP Nabil Orfali for the code:

<amp-youtube width="480"

 height="270"

 layout="responsive"

 data-videoid="lBTCB7yLs8Y"

 autoplay>

</amp-youtube>