this is a nice – very small self hosted video.
Use instead the advanced layerslider :
click to enlarge:

the code at the bottom ( do not on top a background-image) is the video which you can declare as background-video.
put in the code:

<video playsinline autoplay loop muted preload="metadata" style="min-width:100vw; min-height:56vw;" >
<source src="https://finanzengel.de/wp-content/uploads/2018/09/Finanzengel-Sachsen.mp4" type="video/mp4">
<img src="https://finanzengel.de/wp-content/uploads/2018/09/himmel.jpg" title="Your browser does not support the video tag">
</video>

see here ( i will go back to my video as soon as you have seen and prooved it on your iphone) : https://webers-testseite.de/weber/

maybe this is a selfhosted video – there are workaround for that. But a 120MB mp4 is to big for that. – Not only because of traffic but definitly because of performance reasons.
But consider if it is really necessary to show a video on mobile devices, or if a fallback image would not be enough anyway.
Most of the CMS and nearly all WordPress Themes got a lot of troubles with youtube background video playing on Mobile – especially on Iphone/Ipads.

Nevertheless there is one thing i found vor Divi – which we can transfer to Enfold too. Divi has the same troubles to play those youtube videos as background.

If this corresponds to your ideas, then I can tell you how we can solve this with a small plugin. Check if the test page runs on your mobile phone or Ipad. : https://webers-testseite.de/carinda/

_________

Offtopic ?:
And by the way, you’re not the only one asking for help here. Also other participants here have the same desires as you. But difficult topics like yours are not as easy to answer as many other simpler questions.
For example, I have now searched 8 hours for the solution to your question. May i charge you for that. ;) :lol
Have you ever been to other support forums? Obviously not, because here you got help often with very complex php and javascript code is quite unusual on the other boards. Many topic creators don’t even have their own support forums, but only use those of the themes resellers.

And if I didn’t need the solution for my customers as well, I wouldn’t be able to make such an effort for you either.
How much time do you think a mod can spend on one topic to make such a board fit for all? 5 minutes? !

by the way Erin – your individual Links to f.e. about should have the absolute path – because if you are not on the landing page (f.e. on a portfolio page) the #about link has no function (maybe the /#about will work)

.sidebar .inner_sidebar {
    overflow: visible !important;
    padding: 0 10px 0 5px;
}

and i think a lot of trouble comes from your realy small page layout. Why did you change the default 1310px to 1010px ?

or you take the grid-row and put in 2 1/2 Cells each 1/5 columns.
If you like to have then the grid-row not full-width there are possibilities to get this via functions.php.
See here ( for demonstration the 2 cells have a background-color: https://webers-testseite.de/10-columns/

But Dude – this is the selfhosted video. No doubt – that works!
But did you try a vimeo video?

yes – i tested it – works on that installation ( you know my webers-testseite is a bit full with code – maybe there is somesthing in conflict with it.
See : https://webers-testseite.de/weber/a-nice-entry/

But: – with iframe for me its better because its with my Borlabs Cookie Plugin DSGVO konform.
https://webers-testseite.de/maskenzauber/

i think she is right – did not work on my end too:
for the moment take the html widget and use the iframe:
<iframe src="https://player.vimeo.com/video/46232172?autoplay=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

has on my end the advantage, that i can insert it DSGVO konform: https://webers-testseite.de/maskenzauber/

PS: wunderschöne Arbeiten – echt Klasse !

• This reply was modified 7 years, 1 month ago by Guenni007.

don’t know where your “split point” is when layout goes to mobile – but in most default cases it is 768px or 990px so:

@media only screen and (min-width: 768px){
	#footer .container {
	display: flex;
	align-items: flex-end;
	}

	#footer .container .textwidget p:last-child {
	margin-bottom: 0 !important;
	}
}

gib dem Text-Block Element ein benutzerdefinierte Klasse – ich nahm : hr-inlinetext

.hr-inlinetext img {
    width: calc(50% - 20px);
}

.hr-inlinetext .hr {
    display: inline-block;
    width: calc(50% - 20px);
    float: none;
}

@media only screen and (max-width: 990px){
.hr-inlinetext img , 
.hr-inlinetext .hr { width: 100% }
}

die 20px kommen von der Definition der Custom hr :

.hr-custom.hr-icon-yes .hr-inner {
margin-left: 10px;
margin-right: 10px;
}

das sind jeweils 4 lücken a 10px – die müssen in die Werte mit einfließen – sonst kannst du also mit den Prozentwerten die 100% haben – also 40/60 etc.
mit dem MediaQuery musst du schauen, ob das dein “Sprungpunkt” ist bei dem das Layout wechselt. Bei meiner Testinstallation war es 990px

der x-wert verschiebt das ganze ja auch nach rechts.

Wenn du zB hättest:

.sidebar .widget {
    padding-left: 5px;
    box-shadow: 0 0 5px 2px #5c5c5d;
    margin-bottom: 20px;
}

dann sind zum einen die Widget Bereiche getrennt (margin-bottom) zum Anderen hast du dann einen Umlaufenden Schatten-Wurf.
bei deinem Padding-left scheint in der Quick css was schief gegangen zu sein.

PS: manchmal verhindert auch ein overflow:hidden der umgebenden Container den Schattenwurf

yes – the arrow right is very nice Mike posted above in the link mentioned

if would have done it with that class enfold uses vor all menus having submenus: dropdown_ul_available

something like this:

.menu-item.dropdown_ul_available {
    overflow: visible !important;
}

.menu-item.dropdown_ul_available:hover:before {
    display:none
}

.dropdown_ul_available::before {
    content: "\e883";
    font-family: entypo-fontello;
    position: absolute;
    bottom: -20px;
    font-size: 24px;
    color: #bebebe;
    left: 50%;
    transform: translateX(-50%);
}

but my favorite is the arrrow besides the menu title

.menu-item-top-level.dropdown_ul_available > a .avia-menu-text:after {
content: "\e883";
font-family:entypo-fontello;
color: #900;
position: relative;
left: 5px;
vertical-align: middle
}

did you write in any private area how the colors should be on mobile devices- i can not see your aim to obtain?

Yes – without a page to have an input what to do – It’s hard to give advice then
this seems to be very detailed: https://kriesi.at/support/topic/fullscreen-background-image/#post-919041
You have to decide from case to case which settings to make. These css rules were made for his example page mentioned.
Here, for example: https://webers-testseite.de/neu/impressum/#inhaltshaftung, it’s a bit different – (but for the Responsive case css settings would have to be made).
That was a quick change of this new page.
For example, if you could live with changing wallpapers, then there are small plugins that do just that. One random image will be shown per page.

So your page to see would be nice. If you can not make the link public – you have to wait here for mods to come.