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

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 Vine.co.
• Find the Vine you want to use on your website.
• Click on the 3-points icon and then click Embed.

• Scroll down and copy the code.

Step #2. Paste the Embed Code

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

<iframe src="https://vine.co/v/imPIVvJ6E5j/embed/simple" width="600" height="600" frameborder="0"></iframe><script src="https://platform.vine.co/static/scripts/embed.js"></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="https://vine.co/v/imPIVvJ6E5j/embed/simple" width="600" height="600" frameborder="0"></iframe>
</div>
<script src="https://platform.vine.co/static/scripts/embed.js"></script>

Step #4. Add the CSS

Add the CSS below inside one of your stylesheet files:

.vine-responsive{
overflow:hidden;
padding-bottom:100%;
position:relative;
height:0;
}
.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: