Нужно выполнить задание по курсам. Надо написать сайт по мультику. Вставить аудио и видео с ютуба. Создал кнопку, при нажатии открывается контейнер там видео. Но вижу такую картину

Screenshot_7.pngJesus McWood · 6 Сен 2020 в 12:14' data-fancybox="lb-post-560984" data-lb-caption-extra-html="" data-lb-sidebar-href="" data-single-image="1" data-src="https://www.blast.hk/attachments/67987/" style="cursor: pointer;" title="Screenshot_7.png">


Как исправить? Вот код html​

Good Dinosavr

Добрий Динозавр

Анімаційне пригода «Добрий динозавр» від Disney / Pixar розповідає історію неймовірної дружби
                    юного бронтозавра і маленького хлопчика. Цим, на перший погляд, не схожим героям належить разом зробити
                    небезпечну подорож і зрозуміти, що вони не так вже й відрізняються один від одного.

Моменти с фільму

Моменти с мультфільму

Закрити

Музика з фільму

Hello Arlo

Lost in The World

You're Me and More

Вот код css​

@import url('https://fonts.googleapis.com/css?family=Neucha|Philosopher');
.audio_files
{
position
:
absolute
;
left
:
60%
;
top
:
32%
;
}
.container_audio
{
display
:
flex
;
background-image
:
url(img/spot_and_arlo.jpg)
;
background-size
:
cover
;
height
:
800px
;
}
.audio_header
{
position
:
absolute
;
font-size
:
30px
;
left
:
20%
;
top
:
25%
;
color
:
#562e02
;
text-decoration
:
underline
;
text-shadow
:
-3px -3px 3px #fee6b7
,
-5px -5px  5px #e7d780
;
transition
:
ease 1s
;
}
.audio_header:hover
{
color
:
rgba
(
252
,
102
,
3
)
;
transform
:
rotate
(
-180deg
)
;
}
.container_video
{
position
:
absolute
;
left
:
40%
;
}
*
{
box-sizing
:
border-box
;
}
.btn
{
padding
:
20px 50px
;
display
:
inline-block
;
background
:
#EF233C
;
color
:
white
;
text-decoration
:
none
;
transition
:
0.35s ease-in-out
;
font-weight
:
700
;
}
.btn:hover
{
background
:
#dc1029
;
}
.overlay
{
width
:
100%
;
min-height
:
100vh
;
display
:
flex
;
justify-content
:
center
;
align-items
:
center
;
flex-direction
:
column
;
padding
:
40px
;
position
:
fixed
;
top
:
0
;
left
:
0
;
background
:
rgba
(
0
,
0
,
0
,
0.75
)
;
opacity
:
0
;
pointer-events
:
none
;
transition
:
0.35s ease-in-out
;
max-height
:
100vh
;
overflow-y
:
auto
;
}
.overlay.open
{
opacity
:
1
;
pointer-events
:
inherit
;
}
.overlay .modal
{
background
:
white
;
text-align
:
center
;
padding
:
40px 80px
;
box-shadow
:
0px 1px 10px
rgba
(
255
,
255
,
255
,
0.35
)
;
opacity
:
0
;
pointer-events
:
none
;
transition
:
0.35s ease-in-out
;
max-height
:
100vh
;
overflow-y
:
auto
;
}
.overlay .modal.open
{
opacity
:
1
;
pointer-events
:
inherit
;
}
.overlay .modal.open .content
{
transform
:
translate
(
0
,
0px
)
;
opacity
:
1
;
}
.overlay .modal .content
{
transform
:
translate
(
0
,
-10px
)
;
opacity
:
0
;
transition
:
0.35s ease-in-out
;
}
.overlay .modal .title
{
margin-top
:
0
;
}

Вот код js​

$
(
".modal"
)
.
each
(
function
(
)
{
$
(
this
)
.
wrap
(
''
)
}
)
;
$
(
".open-modal"
)
.
on
(
'click'
,
function
(
e
)
{
e
.
preventDefault
(
)
;
e
.
stopImmediatePropagation
;
var
$
this
=
$
(
this
)
,
modal
=
$
(
$
this
)
.
data
(
"modal"
)
;
$
(
modal
)
.
parents
(
".overlay"
)
.
addClass
(
"open"
)
;
setTimeout
(
function
(
)
{
$
(
modal
)
.
addClass
(
"open"
)
;
}
,
350
)
;
$
(
document
)
.
on
(
'click'
,
function
(
e
)
{
var
target
=
$
(
e
.
target
)
;
if
(
$
(
target
)
.
hasClass
(
"overlay"
)
)
{
$
(
target
)
.
find
(
".modal"
)
.
each
(
function
(
)
{
$
(
this
)
.
removeClass
(
"open"
)
;
}
)
;
setTimeout
(
function
(
)
{
$
(
target
)
.
removeClass
(
"open"
)
;
}
,
350
)
;
}
}
)
;
}
)
;
$
(
".close-modal"
)
.
on
(
'click'
,
function
(
e
)
{
e
.
preventDefault
(
)
;
e
.
stopImmediatePropagation
;
var
$
this
=
$
(
this
)
,
modal
=
$
(
$
this
)
.
data
(
"modal"
)
;
$
(
modal
)
.
removeClass
(
"open"
)
;
setTimeout
(
function
(
)
{
$
(
modal
)
.
parents
(
".overlay"
)
.
removeClass
(
"open"
)
;
}
,
350
)
;
}
)
;