Audio Player Missing in Chrome/Affecting Autoplay in video?

I have a site set up to use a video and audio separately. The audio player displays/plays fine in IE and FF as well as the video, but I cannot get the video/audio to work on first pageload in Chrome nor see the audio player. However, if I reload the page, then the audio/video autoplays but still do not see the audio player displayed.

Here’s the code:

<div class="vid">
<video autoplay loop width="100%" height="100%" playsinline="playsinline"><source src="images/audio/intro-trim-compress.mp4" type="video/mp4" /><source src="images/audio/intro-trim-compress.webm" type="video/webm" /></video>
 
<audio autoplay controls loop id="player"> <source src="images/audio/v2.mp3" type="audio/mp3" /><source src="images/audio/v2.ogg" type="audio/ogg" /></audio>
 <a class="uk-button uk-button-default" href="#tm-top-c" uk-scroll><i style="font-size: 24px;" class="uk-icon-arrow-down"></i></a></div>

#player { display: block; position: absolute; bottom: 0; right: -240px; transition: 2s; }
#player:hover { transition: 2s; right: 0; }
.uk-panel.vid { overflow: hidden; }

So I don’t know if this a restriction by Google for the browser or if there’s a coding conflict.

Thank you.

I’ve managed to figure out why the audio player was missing. The player needed a height value (apparently). With that, I see it posting in Chrome.

2 Likes