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.

StoreHippo Help Center