call to replace anchor tags contains '/admin' in href

How do I 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 class="video-item"></iframe>

STEP 3: Modify the Embed Code

Add a div tag around the embed code. Use the CSS class 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.

Share:

2020-06-12T08:28:13.164Z