Player Card and HLS Video

loretoparisi · 2014-11-18T15:42:44.137Z

I have a HLS video to stream through a Twitter Player Card.
This video content was generated through a iPhone read camera, and so its native resolution is 1280x720.
The streaming content as well is 1280x720, since it keeps the same form factor for all the streaming urls generated in the m3u8 file.

So I would like to rotate the <video/> in order to be displayed in the right way on the card as well.

I use this video as the player card specification:

<meta name="twitter:player:stream" content="http://clipmediaservice.origin.mediaservices.windows.net/1fe05e77-e980-4466-9f9d-33bb84f227f4/RIk4L9fa36.ism/manifest(format=m3u8-aapl)">
<meta name="twitter:player:stream:content_type" content="video/mp4; codecs=&quot;avc1.42E01E1, mp4a.40.2&quot;">

where the container iFrame is like the Twitter Player Card example

<video width="100%" src="http://clipmediaservice.origin.mediaservices.windows.net/1fe05e77-e980-4466-9f9d-33bb84f227f4/RIk4L9fa36.ism/manifest(format=m3u8-aapl)" type="video/mp4"></video>

I tried this simple CSS rotation in the container page but didn’t make the trick

<style type="text/css">
video {  
   width:100%; 
   max-width:600px; 
   height:auto; 
   transform:rotate(90deg);
}
</style>

loretoparisi · 2014-11-19T14:00:35.108Z

Is it possible that the CSS transform does not work in the container html rendered by Twitter Card Validator?
Only when running the Card Validator on Mobile I can see the HLS video working (since Safari Mobile will play the m3u8 HLS stream directly in the browser), but no CSS transform is being applied.