vine finder Update - Rotating the Video

Note: The Vine Finder is likely not working since twitter finally removed the v1 search api (as they had promised they would).  I haven't returned to update things to the updated api, which is a little more involved.

One thing I've noticed while browsing vines with the vine finder is that sometimes folks will accidentally record sideways. With the css transform:rotate element, it is a simple matter to rotate the video itself as desired. All that's needed in this particular case is the ability to rotate it in 90-degree intervals, although it's actually possible to rotate it at an arbitrary angle.

The basic way to rotate an element by n degrees is by adding this to the css style for the element:

  -moz-transform:rotate(ndeg);
  -webkit-transform:rotate(ndeg);
  -o-transform:rotate(ndeg);
  -ms-transform:rotate(ndeg);
  transform:rotate(ndeg);

The combination of the angle right next to the string "deg" seems a little odd, but that's what it is, and it works.  There are a lot of other options for the transform: scaling, skewing, translating.  A nice summary is at this mozilla developer page.

So now it is a simple matter to adjust for those videos shot sideways...or upside-down, I guess... Here's a vine of the Siberian Husky "Koda" demonstrating the feature:

A Sideways Dog - "Koda" - Trying to Say "I Love You"
(found with the vine finder)





Popular Posts