---
title: "Embedding Responsive YouTube Videos into Sitecore"
description: "YouTube videos embedded in Sitecore can break on mobile without responsive wrappers. TechGuilds walks through the fix to make embedded videos render correctly."
canonical: "https://www.techguilds.com/blog/adding-responsive-youtube-videos-in-sitecore/"
type: "BlogPosting"
author: "Ken Gray"
publishedAt: "2018-08-07T04:00:00.000Z"
updatedAt: "2026-08-20T04:25:23Z"
source: "https://www.techguilds.com/llms.txt"
---

# 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.

[Image: 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)

[Image: YouTube video URL]

1. Visit [www.EmbedResponsively.com](http://www.embedresponsively.com/) and paste the URL into the input box and click the **Embed** button.

[Image: URL pasted into EmbedResponsively.com]

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

[Image: Responsive code to paste]

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

[Image: Item selected to put responsive video]

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

[Image: 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.

[Image: 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.

[Image: 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.

[Image: 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.

[Image: 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"…”

[Image: 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.

(The side-by-side screenshots that originally compared the mobile view after the fix, the desktop video before specifying width/height, and the desktop video after specifying width/height were hosted on the legacy CMS and are no longer available.)

Until next time, if you haven’t already done so, check out our [productivity for marketers and content authors series](https://www.techguilds.com/blog/productivity-tips-for-sitecore-content-authors-and-experience-marketers).

## 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](https://www.techguilds.com/team/TechGuilds) for the code:

> <amp-youtube width="480"
>
> height="270"
>
> layout="responsive"
>
> data-videoid="lBTCB7yLs8Y"
>
> autoplay>
>
> </amp-youtube>