Tagged: color section, content section, enfold 4.2, video background
-
AuthorPosts
-
October 25, 2017 at 11:37 am #868669
Hello,
We are using a video background on a content section for our website. Since update 4.2 this video background is completely broken. I’ve tried saving the page again and re-adding the video but that didn’t work.
- This topic was modified 7 years, 2 months ago by dirkvisser. Reason: Added info
October 25, 2017 at 2:56 pm #868762Hi enfold team,
I have set up a test page to demonstrate the effect. I used a color section and set the min height off the section to 100% of Browser window height. Usually the video stretches to 100% of the window width and height. It dos not, when you expand the window to a width greater than approximately 1000px. It seems that there is a correlation between the width of the browser window and the min min height of the color section.This occurs since the update to enfold 4.2.
kind regards, Jochen
- This reply was modified 7 years, 2 months ago by erdebene.
October 26, 2017 at 9:57 am #869153Hello,
Thanks for the help and explaining the problem Jochen. I had an example in private data but this shows it’s a bug introduced in 4.2.
A response from the Enfold team would be great since something in their latest update causes this problem.October 26, 2017 at 4:01 pm #869235same here. the video is only shown in the left corner and doesn’t fill the whole colour section like it did before the update.
October 26, 2017 at 4:13 pm #869238This reply has been marked as private.October 26, 2017 at 4:22 pm #869240video backgrounds are broken for us too… but those linked to YouTube for example, are fine. Only those locally hosted are showing this way.
October 26, 2017 at 4:27 pm #8692441) Yep, confirmed The Update screwed up my 3 YouTube videos, 2 of which are auto play, which do not auto play any more.
2) Also the Home Page URL now shows: http://www.mysite.com/#top
Nice work Kreisi.
3) Also, on mobile Phone – parts of the theme’s images are missing as they were before the update.
Really nice update.
Sorry I bought this theme.October 26, 2017 at 4:28 pm #869246This reply has been marked as private.October 26, 2017 at 4:34 pm #869250Yup me too… definitely a bug guys.
Here’s the issue on my staging site with a locally hosted video:
(hosted on WPengine)
October 26, 2017 at 4:39 pm #869252Adding this to my style’s quick CSS section at the bottom of the General Styling tab of the theme options fixed the videos for me… but I’m thinking the animated gif replacements we use on mobile sites aren’t working still/now… still investigating…
.mejs-container { width: 100% !important; }
- This reply was modified 7 years, 1 month ago by milkboy31.
October 26, 2017 at 4:46 pm #869255I can confirm the css milkboy31 sent fixed the video on my homepage.
October 26, 2017 at 4:57 pm #869256Not sure on the animated gif mobile background thing… it appears to work on all but one of my pages, so it may be a file issue on my end. I think the above mejs-container css is the only fix needed at this time.
October 26, 2017 at 5:48 pm #869270@milkboy31 i cann not confirm that your piece of cs fixes the bug. My video background is still broken.
October 26, 2017 at 5:55 pm #869272Are you putting it in the right place? Did you leave it in place?
I looked at your demo page… the code is the same so it should work. If I use the dev tools on my browser to change that value on that page, it fixes the issue… Do the change then try clearing your browser cache and reloading the page?
October 26, 2017 at 6:34 pm #869279as far as i can see on color-section only the customisable arrow key was new.
i don’t know why – i’m often exempted from those bugs.
Maybe it is because i do always update via ftp –
i empty all cache before updating and – switch of all caching tools ( wp-supercache , bwp-minify )
i do completely erase the enfold folder.
and then uploading the new one.Edit : well on safari there is a fault – on all the other browser it works as expected.
- This reply was modified 7 years, 1 month ago by Guenni007.
October 26, 2017 at 7:01 pm #869291on shortcodes.css there are some extra entries for the customisable down arrow.
just one line above – on line 369 :
new 4.2:div .av-section-color-overlay{position: absolute; top:0; left: 0; bottom: 0; width:100%; }
old 4.12div .av-section-color-overlay{position: absolute; top:0; left: 0; height: 100%; width:100%; }
i replaced this old line in the new 4.2 shortcodes css – and voila even Safari plays the video again.
https://webers-testseite.de/elegant/beispiel-seite/
PS do not wonder – i changed a bit in section.php to have the possiblity to mute or unmute video background.
EDIT: wow just now ? only safari makes some troubles.
OK – we had to search for it – this is not the solution.
- This reply was modified 7 years, 1 month ago by Guenni007.
October 26, 2017 at 9:18 pm #869320Guenni007, I’m not seeing the issue (or I don’t understand what you are saying the problem is) that you see on Safari. Without the changes you made, I see the video playback fine, I see the arrow down if it is enabled on the color section as well.
October 26, 2017 at 11:05 pm #869350sometimes the video starts automatically – sometimes it is only a screenshot seen. and the playbutton on it has no function
Dont know.October 27, 2017 at 3:34 am #869374it looks to be an error with full-width items.
We’re seeing issues with the layer slider loading full-width, video slide on the “Fullscreen Slider” element, etc.
~ Greg
October 27, 2017 at 8:38 am #869461Hi,
We can reproduce the issue on our installation. The “mejs-container” is inheriting an incorrect width value but we can’t find the script that’s causing it, yet.
<div id="mep_0" class="mejs-container svg avia_video mejs-video" tabindex="0" role="application" aria-label="Video Player" style="width: 480px; height: 270px;"></div>
The previous css code that @milkboy31 had provided should fix the issue temporarily. You can also use this one.
#top .av-video-slide .mejs-container { width: 100% !important; }
We’ll report the issue.
Best regards,
IsmaelOctober 27, 2017 at 8:41 am #869464I can confirm the background video bug. Applying the CSS fix makes the video work as intended in Chrome and Edge. But Firefox and Brave still do not show the video. I keep on investigating.
October 27, 2017 at 8:54 am #869472To fix the Firefox and Brave issue one have to additionally add:
#top .av-video-slide video { height: auto; }
October 28, 2017 at 4:33 pm #869957And Safari not solved.
By the way – did the .mejs-container only exists if a self-hosted video is set.
on my test page i only inserted youtube video – and no way to find that class.October 29, 2017 at 2:27 am #870052Thank you everyone for your efforts to seek out the fixes on this one!
Sincerely,
GregOctober 29, 2017 at 4:34 pm #870098Mods, is this going to be addressed in a 4.2.1. update? I’m holding off updating my site until this is resolved.
Thanks
October 30, 2017 at 2:33 am #870279I’m having the same issues
October 30, 2017 at 3:45 am #870286Hi Enfold team,
The same problem with self hosted video that is inside of Fullwidth easy slider, after the update.
It shows loading, but video doesnt play. If I add any code that other members mentioned I just get blank grey background, without video.Please help me with solving this.
This id the problematic page with video on top – 3D Studio Max eXtreme kurs.
Thanks in advance.
October 30, 2017 at 4:39 am #870289Hey!
@fabrikaznanja: The video is loading properly but the size is not correct. Please combine the following css codes that they had provided above.#top .av-video-slide video { height: auto !important; } #top .av-video-slide .mejs-container { width: 100% !important; }
We have reported the issue. However, it may take a while before a patch will be released so you have to use the solutions above temporarily.
Best regards,
IsmaelOctober 30, 2017 at 10:20 am #870397Same here, Vimeo does play but somehow the video is not full width.
I tried the above code and it does not change anything for this situation.It seems that vimeo is using a code with inline “left” and “right” positioning in their embed:
<div class="vp-player-layout js-playerLayout" style="left: 466px; right: 466px; top: 0px; bottom: 0px;">
changing them to 0 seems to solve the problem, however we cant as the code is inside the vimeo iframe.
Does anybody know where I can get the previous version to do a rollback?
good luck,
ThomasOctober 30, 2017 at 3:07 pm #870492RESOLVED – MISTAKE IN CSS
—————————————-
Hi all,The code works fine for me (Video back, in appropriate size), however this impacts the section below my header (disappears, black space). Anyone experiencing this issue too and having a solution? Having the Video uploaded on my own server.
Many thanks,
Niko
- This reply was modified 7 years, 1 month ago by Nikolaj1337.
-
AuthorPosts
- The topic ‘Video background broken in Enfold 4.2’ is closed to new replies.