I am working on adding a video to a web site for a grade school, but it won't play or appear to load. This has likely been covered, but the search didn't find it.
The original was on YouTube, but the suggested videos started becoming ones not appropriate for young kids. Therefore, it was decided to put the video directly on the site. After a lot of work trying to get a DVD from the publisher, we finally went into YouTube and downloaded it by logging in with the user's ID and downloading from the video list. The result is an mp4 that works on the computer, but not the browser. I tried changing extensions, but my Mac has limited choices for movie editing.
My coding is below, but I think the problem is with the video. Other than in Sitepoint's HTML5/CSS3 for the Real World book, this is my first video. Any help would be appreciated.
<p><video width="540" height="405" preload="auto" controls poster="assets/images/index/2013-14/index26.jpg">
<source src="assets/images/Sully-Christian-School-Centennial.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
Test page: http://www.sullychristian.org/centennialtest.php