iPad inline video player

I’m having an issue where all of my videos on iPad have the progress indicator overlapping the play button. The progress indicator also does not work. I have tried several variations of the video tag but nothing has worked. It also does this when viewing the app through safari on iPad. I’ve tested the same video tag outside of the framework and this did not happen. Here is a sample of the markup I’m using:

<ion-view title="Advanced">
  <ion-content class="has-header">

  		<p class="subhead">Advanreaced Sitting Guard Attacks</h2>

		<div class="cards">

			<div class="list card">
				<div class="item item-divider">
					Rear Naked Choke from Sitting Guard
				</div>
				<div class="item">
					<video preload="none" width="100%" poster="img/poster-rear-naked-choke-from-sitting-guard.mp400001.png" controls>
			  	 		 <source src="videos/rear-naked-choke-from-sitting-guard.mp4" type="video/mp4">
			  		</video>
				</div>
			</div>

And of coarse there are closing tags to everything.

Within framework:

Outside of framework: