- 76
- 33
Нужно выполнить задание по курсам. Надо написать сайт по мультику. Вставить аудио и видео с ютуба. Создал кнопку, при нажатии открывается контейнер там видео. Но вижу такую картину
Как исправить? Вот код html
Как исправить? Вот код html
HTML:
<!Doctype HTML>
<html>
<head>
<title>Good Dinosavr</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="film_name"> Добрий Динозавр</div>
<div class="film_about">Анімаційне пригода «Добрий динозавр» від Disney / Pixar розповідає історію неймовірної дружби
юного бронтозавра і маленького хлопчика. Цим, на перший погляд, не схожим героям належить разом зробити
небезпечну подорож і зрозуміти, що вони не так вже й відрізняються один від одного.
</div>
<section id="video" class="container_video">
<a href="#" class='btn open-modal' data-modal="#modal1">Моменти с фільму</a>
<div class='modal' id='modal1'>
<div class='content'>
<h1 class='title'>Моменти с мультфільму</h1>
<p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/KucMRCG1WJI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</p>
<a class='btn close-modal' data-modal="#modal1" href="#">Закрити</a>
</div>
</div>
</section> <br><br><br><br><br>
<section id="audio" class="container_audio">
<div class="audio_header">
<h2>Музика з фільму</h2>
</div>
<div class="audio_files">
<ul>
<li>
<strong>Hello Arlo </strong>
<br>
<audio src="music/ost1.mp3" controls></audio>
</li>
<li>
<strong>Lost in The World</strong>
<br>
<audio src="music/ost2.mp3" controls></audio>
</li>
<li>
<strong>You're Me and More</strong>
<br>
<audio src="music/ost3.mp3" controls></audio>
</li>
</ul>
</div>
</section>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>Вот код css
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
JavaScript:
$(".modal").each( function(){
$(this).wrap('<div class="overlay"></div>')
});
$(".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);
});
