but sorry but again the question : how do you try to embed this?

On Enfold ( and on other Themes too) you can not enter a script in a site by putting a script in a text-area as you like.
https://kriesi.at/documentation/enfold/add-custom-js-or-php-script/

scroll down to : https://kriesi.at/documentation/enfold/add-custom-js-or-php-script/#add-a-script-to-head-section
or below to see how to insert in footer.

Or to enqueue a custom external script: https://kriesi.at/documentation/enfold/add-custom-js-or-php-script/#load-shortcodejs-from-child-theme-folder

you can do that for single pages, page arrays , categories or single posts only etc

1) Create an enfold heading in a flex-column.
2) if there are columns besides each other it is best to have the equal-height option.
3) i gave to the heading itself a custom class: change-on-hover
4) the hover effect will be active if i’m over the whole column
5) Put in the heading input field:
<span data-hover="About">About </span> <span data-hover="Me">Me</span>

6) The data-hover values do not need to be the same – but it looks better if so
7) do this to quick css:

.change-on-hover .av-special-heading-tag {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    z-index: 111;
    width: 100%;
    margin: 0 auto !important;
    overflow: hidden;
}

.change-on-hover .av-special-heading-tag span {
font-weight: bold;
    display: inline-block;
    position: relative;
    transition: transform 0.3s;
}

.change-on-hover .av-special-heading-tag span:first-child {
	color: #fff
}
.change-on-hover .av-special-heading-tag span:nth-child(2) {
	color: #ffb400
}

.change-on-hover .av-special-heading-tag span:first-child::before,
.change-on-hover .av-special-heading-tag span:nth-child(2)::before {
	position: absolute;
	content: attr(data-hover);
}

.change-on-hover .av-special-heading-tag span:first-child::before {
	top: 105%
}

.change-on-hover .av-special-heading-tag span:nth-child(2)::before {
	bottom: 105%
}

.flex_column:hover .change-on-hover .av-special-heading-tag span:first-child {
    transform: translate3d(0, -105%, 0);
    color: #ffb400
}

.flex_column:hover .change-on-hover .av-special-heading-tag span:nth-child(2) {
    transform: translate3d(0, 105%, 0);
    color: #fff
}

PS: it works responsive – but maybe it is important to take a relative font-size as i do in the above example 4.5vw

• This reply was modified 6 years, 10 months ago by Guenni007.

here with enfold and only css – if this is it – tell me:
hover the about me column: https://webers-testseite.de/buttonlink/

it is all in the code of you link you gave to us ;)

and by the way on default i think svgs allways shrink to the center when surrounding container gets smaller.

But you could set a different behavior on the svg code itself ( open with a good editor like sublime-text on OSX or notepad++ for windows)
you see the header of the svg – f.e.:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Webdesign" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 570 200" enable-background="new 0 0 570 200"  xml:space="preserve">

before that space preserve you can add : preserveAspectRatio=”xMinYMin meet” so that there is:
Link : https://developer.mozilla.org/de/docs/Web/SVG/Attribute/preserveAspectRatio

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Webdesign" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 570 200" enable-background="new 0 0 570 200" preserveAspectRatio="xMinYMin meet" xml:space="preserve">

xMinYmin – means it shrinks to the left top
xMinYmax – means it shrinks to the left bottom etc. etc.

options are Min , Mid, Max

you can see it here : https://webers-testseite.de/wp-content/uploads/webers-webdesign.svg and difference to :
https://webers-testseite.de/wp-content/uploads/webers-webdesign2.svg
shrink the height of your browser window on both links and see

Dear Rikard – i think a screenshot is not a good advice. This seems to break the copyright of google.
Screenshots (even it is concerning to the api images):
Private use on the Internet: not permitted
Commercial use on the Internet: not permitted
If you use Screenshot of maybe Google Earth: then you could get into copyright conflicts with third party providers (satellite operators etc.).

i use firefox developer edition on Mac OS X – but i do not see these icons.
( Same with : Safari and Chrome)
What happend if you are logged out ? did you see those icons aswell on your browser?

by the way : on GDPR (DSGVO) Reasons – wouldn’t it be better if you are using a non embedded Youtube Video – and use instead f.e. an image of the film and link to the youtube video in a lightbox?:
(just place a screenshot as Avia Image and link to a manually link:

https://www.youtube.com/watch?v=lhZsLYmmZWM?autoplay=1&cc_load_policy=1&enablejsapi=1&ecver=2&playsinline=1&rel=0&showinfo=0&color=white&iv_load_policy=3&iframe=true

https://webers-testseite.de/video-with-image-link/

what you see might be the alternative Logo for transparency option.
Look if you got an entry on Enfold (or Enfold-Child) – Header – Transparency Options

hm – i see it is hard to style if you got a header sticky to top. Because it scrolls away.
so i’m testing it right now to have the same behavior as #header

take better the hook: ava_main_header

add_action( 'ava_main_header', 'enfold_customization_widget_area_before_header' );
function enfold_customization_widget_area_before_header() {
  dynamic_sidebar( 'before-header' );
}

and create a new widget called: before-header

but even this is hard to obtain rightly designed – because – the offset to main was wrong calculated then.
On non shrinking headers you can adjust this by giving the main container a different padding-top.

#header_main > .widget {
    width: 100%;
    max-width: 1310px;
    margin: 0 auto;
    padding: 0 50px;
}

/*** depends on your header settings  ***/
.html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 380px;
}

• This reply was modified 6 years, 10 months ago by Guenni007.

The ecver setting prevents the video recommendations when pausing the film. The playsinline setting ensures that the whole thing runs on a mobile phone like on a desktop. etc pp

you only have to add this to the film link always

?autoplay=1&cc_load_policy=1&enablejsapi=1&ecver=2&playsinline=1&rel=0&showinfo=0&color=white&iv_load_policy=3&iframe=true

First : take the individual link option not the iframe option!
all additional links to a video link :
first one was added via ? all other links will be added via &

so you got maybe something like this:

https://www.youtube.com/embed/4Myze3dfIw0?autoplay=1&cc_load_policy=1&enablejsapi=1&ecver=2&playsinline=1&rel=0&showinfo=0&color=white&iv_load_policy=3

if you link from an image or a text to it – add &iframe=true

https://www.youtube.com/embed/4Myze3dfIw0?autoplay=1&cc_load_policy=1&enablejsapi=1&ecver=2&playsinline=1&rel=0&showinfo=0&color=white&iv_load_policy=3&iframe=true

or with watch:

https://www.youtube.com/watch?v=4Myze3dfIw0?autoplay=1&cc_load_policy=1&enablejsapi=1&ecver=2&playsinline=1&rel=0&showinfo=0&color=white&iv_load_policy=3&iframe=true

see here: https://webers-testseite.de/buttonlink/

you can take the caption f.e. or the title for this to show in editing ismaels code a bit:

still brainstorming :lol sorry
i tested it and now it does not work as usual

but on your page i see in your source code no title, no alt tags nor captions ! https://www.kistefosmobler.no/inspirasjon/

But why don’t you put these input fields for it – which are made for that:

• This reply was modified 6 years, 10 months ago by Guenni007.

this here : https://naturleben-rheinland.de/ – is an Enfold Multisite installation.
The “motherpage” is Enfold and both subsites are Enfold pages. But i do start it from the beginning to obtain that mutlisite. If it is easy to switch from an existing page i don’t know

if works on my site too:
so what for is the calltoaction class? maybe it is in conflict with those settings

and by the way: these aren’t 1/3 columns ? ;)

perfect!
I don’t know where your h2-green class is ( maybe on the heading alb element) – then you have to select it via : ( .h2-green h2 )

i got a bit different way if he likes to reverse the change on scrolling up and down:

add_action('wp_footer', 'scroll_up_down_change', 9999);
function scroll_up_down_change() {
?>
<script>
    (function($) {
		var element_to_animate = $('.h2-green h2');
        element_to_animate.waypoint(function(direction) {
           if (direction === 'down') {
				$(this.element).css('color', 'red');
				  }
				}, {
				  offset: '30%'
				});		
		element_to_animate.waypoint(function(direction) {
             if (direction === 'up') {
				$(this.element).css('color', 'green');
				  }
				}, {
				  offset: '30%'
				});
})(jQuery);
</script>
<?php
}

you can see it here on some h3 headings: https://webers-testseite.de/datenschutzerklaerung/

The better has always been the enemy of the good.

By default, there is no header.php in the child theme.
By the way did you have installed a child-theme and work with it?