Create Vine Embeds that are Responsive and have a Square Aspect Ratio

Responsive Vines with Square Aspect Ration

Vines are funny, short videos that many people want to share on the site.

To embed a Vine in your site you need the HTML code from the provider, however if the CSS of your website doesn’t include responsive support for a square (1:1) aspect ratio, then your Vines will look distorted in mobile devices.

In this tutorial, we’ll show you how to insert Vines in your site and include responsive support in the right way, by using a few lines of CSS.

Step #1. Get the Vine Embed Code

  • Go to
  • Find the Vine you want to use on your website.
  • Click on the 3-points icon and then click Embed.
Responsive Vine Embeds
  • Scroll down and copy the code.
Responsive Vine Embeds

Step #2. Paste the Embed Code

Paste the code from previous step in your website. It will look similar to this:

<iframe src="" width="600" height="600" frameborder="0"></iframe><script src=""></script>

Step #3.Modify the Embed Code

Add a div tag around the iframe. Use the CSS class vine-responsive so that the code now looks like this:

<div class="vine-responsive">
<iframe src="" width="600" height="600" frameborder="0"></iframe>
<script src=""></script>

Step #4. Add the CSS

Add the CSS below inside one of your stylesheet files:

.vine-responsive iframe{
left: 0;
top: 0;
height: 100%;
width: 100%;
position: absolute;

Step #5. End result

The vines now will be responsive and use the full width of its container, keeping the square aspect ratio. Resize your browser to see it in action.

The first image shows how a vine will be displayed distorted in small devices, the second one fix that issue with the CSS from this post:

Responsive Vine Embeds


  • Valentin Garcia

    Valentin discovered Joomla in 2010, and since then he has considered it as the best CMS. Valentin has been coding extensions and templates for Joomla for many years and truly enjoys helping people build their own websites with Open Source tools. He lives in San Julián, Jalisco, México.

0 0 votes
Article Rating
Notify of

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x