Embedding Responsive Vine Videos in WordPress

I wanted to embed some Vines, but wanted them to be larger than 300 px and responsive. The shortcodes didn’t work, but with a little extra CSS, I was able to pull it off. I followed the technique from Web Designer Wall and modified it for Vine’s square aspect. Check out this example.

.vine-wrapper {
        width: 600px;
	max-width: 100%;
        margin: auto;
}
.embed-vine {
	position: relative;
	padding-bottom: 100%; 
	height: 0;
	overflow: hidden;
}
.embed-vine iframe {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 600px;
	margin: auto;
	display: block;
	max-height: 600px;
}

Tim Lepczyk

Writer, Technologist, and Librarian.

Leave a Reply