CSS Grid - как определить размер видео в моей сетке? - PullRequest
Новая
       1

CSS Grid - как определить размер видео в моей сетке?

1 голос
/ 17 марта 2019

Работая над проектом с Free Code Camp, я не могу понять, как правильно настроить размер видео, чтобы он помещался в столбцы / строки сетки. Я также не понимаю, почему в нижней части моей страницы есть пробел. Любая помощь с благодарностью!

Вот мой кодовый блок: https://codepen.io/andrewcauthorn/pen/aMYbJr

`

#image {
  width: 100%;
  max-width: 625px; 
  display: block;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

main {
  background-color: black;
}

.container {
  color: white;
}

  .container {
    font-size:;
    width: 100%;
    background: ;
    display: grid; 
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    margin-left: auto;
    margin-right: auto;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    overflow: hidden;
  } 

#all {
  border: solid #552583;
  color: #FDB927;
}

h1 {
  color: #FDB927;
  text-align: center
} 

.d1 {
  position: relative;
  padding-bottom: 56.25%;

}

.d1 iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 0;
  object-fit: cover;
}

<!DOCTYPE html>
<html>
  <head>
    <!-- metadata elements -->
  </head>
  <title id="title">The Black Mamba: Win Over Anything</title>
  <main id="main">
    <h1>The Black Mamba: The Legacy </h1>
    <div id="img-div">
        <figure>
            <img src="http://game7network.com/wp-content/uploads/137_1atiba_jefferson_kobe_bryant_3.jpg" id="image" alt="blah blah blah">
                <figcaption id="img-caption">
                  I am Kobe
                </figcaption>   
        </figure>
    </div>
<a href="https://ftw.usatoday.com/2015/12/kobe-bryant-stats-record-most-games-20-years-most-missed-shots-81-points-stats-michael-jordan-lakers" target="_blank">What's up</a>
    <article id="tribute-info">

 <div class="container">
  <div class="d1" id="all">20 time all-star</div>
  <div class="d2" id="all"><iframe width="560" height="315" src="https://www.youtube.com/embed/Lf4biDUfwug" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
  <div class="d3" id="all">3</div>
  <div class="d4" id="all">4</div>
  <div class="d5" id="all">5</div>
</div>

    </article>              

  </main>
    <!-- page contents -->
  </body>
</html>

`

1 Ответ

2 голосов
/ 17 марта 2019

Чтобы исправить пробел, вам просто нужно удалить поле по умолчанию, которое браузер добавляет к вашему тегу body.Вы можете сделать это, добавив это в свой CSS: 

body {
    margin: 0px;
}

Чтобы исправить изменение размера видео, вы хотите заменить текущие значения <iframe> высоты и ширины на 100% от родительского. 

<iframe width='100%' height="100%" src="https://www.youtube.com/embed/Lf4biDUfwug" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
...