Here’s my code right now:
<div class="home-text-wrapper">
<?php
global $smof_data;
if($smof_data['rnr_home_type']=="Callout Text") { ?>
<div class="container homevideo" overflow-scroll="true">
<video id="video" autoplay loop="" preload="none" style="width: 100%; height: auto;" muted controls poster="http://puppod.com/wp-content/uploads/2013/06/PosterImage.png">
<source src="http://puppod.com/wp-content/uploads/2013/06/PPiOS.mp4" type="video/mp4">
<source src="http://puppod.com/wp-content/uploads/2013/06/PPAndroid.mp4">
<source src="http://puppod.com/wp-content/uploads/2013/06/PupPod.webm" type="video/webm">
<source src="http://puppod.com/wp-content/uploads/2013/06/PupPod.ogg" type="video/ogg">
Video not found.
</video>
</div>
<?php }
</div>
This is a WordPress installation. The PHP activates the video section when the “Callout Text” option is chosen in the theme settings.
The video works in every other browser, including Safari on iOS prior to the most recent 8.2 update. Currently, on iOS, Safari shows my loading GIF where the video should be and cuts off most of the website.
Any ideas?