create video, not for request

src/index.html

@@ -56,7 +56,7 @@
     <main>
       <section class="section">
         <ul class="container film__container"></ul>
-     </section>
+      </section>
 
       <!-- Section pagination -->
       <section class="pagination-section">
@@ -71,7 +71,6 @@ <h2 class="visually-hidden">Pagination</h2>
         <div class="preloader"></div>
       </div>
       <div class="loader visually-hidden"></div>
-
     </main>
     <include src="./partials/modal.html"></include>
     <script src="./index.js" type="module"></script>

src/js/api.js

@@ -15,3 +15,17 @@ async function onGetFilmDataByID(id) {
     console.log(error);
   }
 }
+
+export async function onGetFilmVideoByID(id) {
+  try {
+    const response = await axios.get(
+      `${BASE_URL}/movie/${id}/videos?api_key=${KEY}`
+    );
+    if (!response.status) {
+      throw new Error('This movie is not available');
+    }
+    return response;
+  } catch (error) {
+    console.log(error);
+  }
+}

src/js/modal-create-markup.js

@@ -53,6 +53,7 @@ function onCreateMarkup({
       <p class="modal-info__description">
         ${overview}
       </p>
+      <button type="button" class="watch-trailer__btn " id="${id}">WATCH TRAILER</button></li>
       <ul class="modal-info__button-list">
         <li class="modal-info__button-list-item">
           <button type="button" class="modal-button">ADD TO WATCHED</button></li>
@@ -62,12 +63,13 @@ function onCreateMarkup({
     </div>
   </div>
 </div>`;
+
   onAddMarkupFromDOM(filmInfoMarkup);
   let closeModalButton =
     refs.backdrop.getElementsByClassName('button-close')[0];
   closeModalButton.addEventListener('click', onCloseModal);
   closeModalButton.addEventListener('click', onRemoveMarkupModal);
-  console.log(`📌  closeModalButton`, closeModalButton);
+  // console.log(`📌  closeModalButton`, closeModalButton);
 }
 
 function onAddMarkupFromDOM(markup) {

src/js/modal-open-close.js

@@ -2,9 +2,14 @@ import { onGetFilmDataByID } from './api';
 import noImageAvailable from '../images/no-image-available.jpg';
 import { refs } from './refs';
 import { onCreateMarkup } from './modal-create-markup';
+import { onGetFilmVideoByID } from './api';
+
 export { onCloseModal };
 const BASE_POSTER_URL = 'https://image.tmdb.org/t/p/w500/';
 
+const watchBtn = document.querySelector('.watch-trailer__btn');
+const overlayContent = document.querySelector('.overlay-content');
+
 refs.filmContainer.addEventListener('click', onOpenModal);
 
 function onOpenModal(e) {
@@ -58,9 +63,64 @@ function onOpenModal(e) {
         data.overview = 'Description not found';
       }
       onCreateMarkup(data);
+
+      // =================VIDEO================
+
+      document.getElementById(filmId).addEventListener('click', () => {
+        openTrailer(filmId);
+      });
     });
 }
 
+function openTrailer(filmId) {
+  onGetFilmVideoByID(filmId)
+    .then(data => {
+      return data.data;
+    })
+    .then(data => {
+      if (data.results.length > 0) {
+        console.log(data.results);
+        var videoArr = [];
+        // const filmRes = data.results;
+        filmRes.forEach(({ name, key, type }) => {
+          // filmRes.find(item.id);
+          if (type === 'Trailer') {
+            return videoArr.push(
+              `<div class="iframe__div ">
+              <button data-modal-close type="button" class="button-close">
+              <svg class="button-close__icon" width="14" height="14">
+              <use href="${refs.IconCloseHref}"></use>
+              </svg>
+              </button>
+              <iframe 
+                  class="iframe-video"
+                  width="760" height="515" 
+                  src="https://www.youtube.com/embed/${key}" 
+                  title="${name}" frameborder="0" 
+                  allow="accelerometer; autoplay; clipboard-write; 
+                  encrypted-media; gyroscope; picture-in-picture; 
+                  web-share" allowfullscreen>
+                  </iframe></div>`
+            );
+          }
+        });
+
+        refs.backdrop.innerHTML = videoArr.join('');
+
+        let closeModalButton =
+          refs.backdrop.getElementsByClassName('button-close')[0];
+        closeModalButton.addEventListener('click', onCloseModal);
+        closeModalButton.addEventListener('click', onRemoveMarkupModal);
+      }
+    });
+}
+
+function onRemoveMarkupModal() {
+  refs.backdrop.innerHTML = ` `;
+}
+
+// ===============================================================
+
 function onCloseModal() {
   window.removeEventListener('keydown', onEscKeyPress);
   refs.backdrop.classList.add('visually-hidden');

src/partials/modal.html

@@ -5,4 +5,6 @@
       href="./images/icon.svg#icon-close-button"
     ></use>
   </svg>
+
+  </div>
 </div>

src/sass/components/modal.scss

@@ -234,3 +234,14 @@
     margin-right: 15px;
   }
 }
+
+// =============================VIDEO==================
+
+.iframe__div {
+  position: relative;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.5);
+}