Why Not Responsive YouTube Videos into Sitecore


Lets learn how to embed a you-tube video into the Sitecore page which should work in responsive way.

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

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

    URL pasted into EmbedResponsively.com

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

    Responsive code to paste

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

    Item selected to put responsive video

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

    Click the Edit HTML option or link

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

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

  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.

    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.

Have any Question or Comment?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Discussion Topics