Why Not Responsive YouTube Videos into Sitecore

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. https://xchangesitecore.com/why-not-responsive-youtube-videos-into-sitecore/ Vikash Raaj

Comments

Post a Comment

Popular posts from this blog

Razl for Sitecore

Image
Razl for Sitecore Razl (Hedgehog) Razl allows developers to have a complete side by side comparison between two Sitecore databases, highlighting features that are missing or not up to date. Users can easily move missing items from one database to another. Whether it’s finding that one missing template, moving an entire database or shifting just one item, Razl allows developers to do it seamlessly. From development to testing and post production, Razl makes itself useful in dozens of different Sitecore scenarios. Features like Deep Compare allow all items in a Sitecore tree to be compared, while Lightning Mode provides the information at lightning speed. With numerous use cases that begin with the very first compare, experience the power of Razl for yourself! https://xchangesitecore.com/razl-for-sitecore/ Vikash Raaj
Read more

Sitecore Rocks web Service 403 Forbidden error

Image
Sitecore Rocks web Service 403 Forbidden error Getting a 'forbidden' message when trying to connect to my local site via Sitecore Rocks Whenever we started getting the error: (403) Forbidden error message when trying to connect from my local development instance to connect the Sitecore Rocks web service, we need to fix this issue only by allowing the access to the folder as anonomous. Error The HTTP request was forbidden with client authentication scheme 'Anonymous'. The remote server returned an error: (403) Forbidden. How to do that Every Google page I hit says that it's likely caused by the WebServices directory not having anonymous access enabled in IIS. Open web.config and add below section <location path="sitecore/shell/WebService"> <system.web> <authorization> <allow users="?,*" /> </authorization> </system.web> </location> https://xchangesitecore.com/sitecore-roc
Read more

Multi Single Line Text Custom Field Plugin

Multi Single Line Text Custom Field Plugin Have you ever faced the problem of keeping multiple single line text without the namevalue collection type? here comes to solution for that. Multi SingleLine Text Custom Field https://xchangesitecore.com/multi-single-line-text-custom-field-plugin/ Vikash Raaj
Read more