I'm trying to replicate this: http://wistia.com/blog/fullscreen-video-homepage on my site, but even working with just the base demo that they give, is running me into issues. If I simply download the sample from that page and open the video, it works fine, but if I do anything as seemingly simple as swapping the background video with the foreground video, it breaks, let alone replacing those videos with my own videos (which is my eventual goal with all of this).
Here's what I'm doing. Replacing this in the javascript:
overlayVideo: 'fji9juvptr',
overlayVideoDiv: '#wistia_fji9juvptr',
backgroundvideo: 'z1ggfo8f86',
backgroundideoDiv: '#wistia_z1ggfo8f86'
with this:
overlayVideo: 'z1ggfo8f86',
overlayVideoDiv: '#wistia_z1ggfo8f86',
backgroundvideo: 'fji9juvptr',
backgroundideoDiv: '#wistia_fji9juvptr',
and replacing this in the HTML:
<div id="wistia_z1ggfo8f86" class="wistia_embed backgroundVideo" style="width:920px;height:518px;"></div>
<div id="wistia_fji9juvptr" class="wistia_embed overlayVideo" style="width:1920px;height:1080px;"></div>
with this:
<div id="wistia_fji9juvptr" class="wistia_embed backgroundVideo" style="width:920px;height:518px;"></div>
<div id="wistia_z1ggfo8f86" class="wistia_embed overlayVideo" style="width:1920px;height:1080px;"></div>
And that's enough to break it. My guess is that something about the two videos is different that causes the z1ggfo8f86 video to work as the background but not the fji9juvptr video, but I can't tell what that difference is.
I also tried just changing the names of the divs (I changed the "a" in "wistia" to an "o"), but that also broke it so I assume those div names are processed somehow by Wistia.
Any ideas on what I'm missing?
I ended up figuring this out. Of the two videos they use in the Tutorial, the Background one had configured (in Wistia) auto-play and loop, whereas the overlay video (for good reason) did not. Swapping them thus broke auto-play, and since the background video has no way to make it play, it'd just appear to not work at all (and the overlay video would auto-play when the page was loaded, so you'd hear it in the background despite no video being visible.
The solution is to either edit the video in Wistia's configuration properties to have the background one load and the foreground one not, or use the Embed API to set the settings in the JavaScript itself so you don't have to worry about what the video's default settings are.