Archived topic
Video hero with audio
7 replies · Started by Jana on September 19, 2019
My mpg4 has audio but it isn't coming through in the video in my hero.
Here's the code:
<video loop muted autoplay poster="https://centerforahumaneeconomy.org/karnerbluecapital/staging/wp-content/uploads/2019/09/bull_elephant_karner_blue_capital_2056x1161_dk.jpg" class="background-video">
<source src="https://karnerbluecapital.com/wp-content/uploads/2019/09/Karnerr-Blue-Capital-Butterfly-1.mp4">
<source src="https://karnerbluecapital.com/wp-content/uploads/2019/09/Karnerr-Blue-Capital-Butterfly-1.webm">
<source src="https://karnerbluecapital.com/wp-content/uploads/2019/09/Karnerr-Blue-Capital-Butterfly-1.ogv">
</video>
And here's the css:.background-video {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 1;
}
.page-hero {
position: relative;
overflow: hidden;
}
.background-video-content {
position: relative;
z-index: 1;
}
video[poster] {
object-fit: cover;
width: 100%;
height: 100%;
}
I looked in the forum but couldn't find it. Thanks, Jana
Hi there,
Have you tried removing muted from the HTML?
It's explained in details here:
https://docs.generatepress.com/article/page-hero-background-video/
Let me know :)
Thanks for the response. That sounds sensible and easy but when I delete muted from the html, my animation stops working.
HTML:
<video loop autoplay poster="https://animalimpactfund.com/wp-content/uploads/2019/09/bull_elephant_karner_blue_capital_1900x1100_dk.jpg" class="background-video">
<source src="https://animalimpactfund.com/wp-content/uploads/2019/09/Karner-Blue-Capital-Butterfly.mp4">
<source src="https://animalimpactfund.com/wp-content/uploads/2019/09/Karner-Blue-Capital-Butterfly.webm">
<source src="https://animalimpactfund.com/wp-content/uploads/2019/09/Karner-Blue-Capital-Butterfly.ogv">
</video>
Also, I've embedded a sound file into some text on the home page and it works in WP and some browsers, but not consistently, it seems:
<embed src="https://karnerbluecapital.com/wp-content/uploads/2019/09/Forest.mp3" width="0" height="0"></embed>
Thanks, Jana
Hi there,
most browsers will not auto play video if there is audio - hence why it requires the muted argument in the <video> tag.
Wow - didn't know that. Is there a workaround that you know of?
I'm embedding the audio with some text on the page - but it doesn't seem to work on all browsers:
<embed src=”https://karnerbluecapital.com/wp-content/uploads/2019/09/Forest.mp3″ width=”0″ height=”0″></embed>
Thanks, Jana
Browsers have different policies governing this - here's googles take on it all:
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
Thanks, David. You guys are always so helpful and knowledgeable!
Glad to be of help :)
