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.

Embedded mobile YouTube video before responsive fix

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)
YouTube video URL
  1. Visit www.EmbedResponsively.com and paste the URL into the input box and click the Embed button.
URL pasted into EmbedResponsively.com
  1. At the bottom of the displayed video, copy the style-based embed code.
Responsive code to paste
  1. Log into the Sitecore Content Editor and select the page on which you want the video embedded.
Item selected to put responsive video
  1. Open the Rich Text field in HTML mode by clicking the Edit HTML option.
Click the Edit HTML option or link
  1. Position the cursor where you want the video to appear on the page and paste in the embed code.
Paste the responsive code at the location for the video
  1. Accept, Save and Publish your page and test on your mobile or emulator within your browser.
YouTube video now responsive on mobile

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.
Advanced css media query
  1. 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.

Closing the CSS media query with curly braces

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

Addition of width and height for desktop video size

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.

| | | | --- | --- | | !YouTube video now responsive on mobile | !Desktop video size before width and height specified<br>!Desktop video size after width and height specified |

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: