html5 Video tag style messed in Ionic CSS

ionic-v1
10

After some testing I’ve finally managed to fix the appearance of the player by creating it inside a local iframe.

I found issues adding the code of the video element (which is dynamic) into the iframe, because writing directly to the iframe.contentDocument (as suggested here) made the app crash in Android 4.1.2, but using a data URL worked. This is how the code looks:

var DATA_SRC_PREFIX = "data:text/html;charset=utf-8,";
var HTML5_PLAYER_DATA_CODE = '<html><head></head><body>' + 
	'<video poster="{{poster}}" preload="metadata" controls webkit-playsinline>' +
	'<source ng-repeat="src in playerSrcList track by $index" ng-src="{{trustResourceUrl(src.url)}}" type="{{src.format}}">' +
	'Your browser doesn\'t support HTML5 video.' +
	'</video>' + 
	'</body></html>';

var compiledPlayer = $compile("<div>" + HTML5_PLAYER_DATA_CODE + "</div>")(scope);
$timeout(function(){ //Need timeout to wait to get the interpolated html code
	scope.model.iFrameDataSrc = $sce.trustAsResourceUrl(
		DATA_SRC_PREFIX + escape(compiledPlayer.html())
	);
});

Anyway I still wonder how ionic.css affects the appearance of the video player.

Hope it helps.
  Rafa