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; }