- This topic has 7 replies, 3 voices, and was last updated 4 years, 6 months ago by David.
-
AuthorPosts
-
September 19, 2019 at 2:13 pm #1013982Jana
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
September 19, 2019 at 5:02 pm #1014044LeoStaffCustomer SupportHi 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 🙂
September 23, 2019 at 7:17 am #1016647JanaThanks 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
September 23, 2019 at 7:33 am #1016658DavidStaffCustomer SupportHi there,
most browsers will not auto play video if there is audio – hence why it requires the
muted
argument in the <video> tag.September 23, 2019 at 8:47 am #1016828JanaWow – 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
September 23, 2019 at 2:55 pm #1017113DavidStaffCustomer SupportBrowsers have different policies governing this – here’s googles take on it all:
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
September 23, 2019 at 7:05 pm #1017199JanaThanks, David. You guys are always so helpful and knowledgeable!
September 24, 2019 at 1:13 am #1017311DavidStaffCustomer SupportGlad to be of help 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.