Helpcenter +918010117117 https://help.storehippo.com/s/573db3149f0d58741f0cc63b/ms.settings/5256837ccc4abf1d39000001/57614ef64256dc6851749879-480x480.png" [email protected] https://www.facebook.com/StoreHippohttps://twitter.com/StoreHippohttps://www.linkedin.com/company/hippoinnovations/https://plus.google.com/+Storehippo/posts
B4,309-10 Spaze iTech Park, Sector 49, Sohna Road, 122001 Gurgaon India
call to replace anchor tags contains '/admin' in href

How to make the embedded YouTube video responsive?

When you add a product, you can also provide a video on the product page for a better understanding of the product. Adding a product video gives a detailed description of the product which can help your customers to make a better choice. StoreHippo provides the feature to embed a YouTube video. Once, you have embedded a YouTube video, then the next task is to make it responsive. Making it responsive helps the customers to view it on various devices of different screen sizes, such as a desktop or mobile screen. YouTube makes it easy to embed its player on your own website. In order to make the embedded YouTube video responsive, follow the steps given below:

STEP 1: Get the YouTube Embed Code

The very first step is to get the YouTube embed code. To get the YouTube embed code, follow the steps given below:

  • Go to Youtube.
  • Find the video you want to use on your website.
  • Click on Share >> Embed >> Right click and copy the HTML code.

STEP 2: Use the Embed Code

Paste this embed code in your website. It will look similar to this:

<iframe width="420" height="315" src="/" frameborder="0" allowfullscreen></iframe>

STEP 3: Modify the Embed Code

Add a div tag around the embed code. Use the CSS class to make video responsive so that your code now looks like this:

<div class="video-container">
    <iframe class="video-item" src="/" frameborder="0" allowfullscreen></iframe>
</div>

STEP 4: Add the CSS

Now add some CSS properties inside one of your stylesheet files:

    .video-container {
        position: relative;
        padding-bottom: 55%;
        padding-top: 35px;
        height: 0;
        overflow: hidden;
    }

    .video-item {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

Now, your videos will be responsive.

Similar Topics

2022-09-01T14:08:48.769Z