Вставить видео на сайт

Question

Нужно вставить видео и справа от него контент. Но когда ставишь display:flex; видео пропадает. Как поставить видео и рядом с ним текст?

#contact {
  background: #000322;
}

#contact .contact-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#contact .contact-wrapper .video-container {
  padding-bottom: 20%;
  max-width: 35%;
  z-index: 100;
}

#contact .contact-wrapper .video-container iframe {
  width: 100%;
  height: 100%;
}

#contact .contact-wrapper .contact-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

<section id="contact">
        <div class="container">
            <div class="contact-wrapper">
                <div class="video-container">
                    <iframe src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0"></iframe>
                </div>
                <div class="contact-title">
                    <div class="title">
                        <h2 class="white-text">Как заказать?</h2>
                    </div>
                </div>
            </div>
        </div>
    </section>

Answer 1

Короче разбирал я ваш код - по итогу новый написал. свойство flex не надо назначать видео, это для общего контейнера. Так же в ссылке на youtube внутри iframe нужно указывать размер видео, а то не будет работать норм.

.container {
  max-width:1180px;
  margin: 0 auto;
}
.block {
  display: flex;
  padding: 20px;
  height: 100%;
}
.video-container {
  width: 100%;
  height: 100%;
  background-color: black;
}

.text {
  margin: 0 20px;
}

<div class="container">
  <div class="block">
    <div class="video-container">
                    <iframe width="400" height="300" src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0"></iframe>
    </div>
    <div class="text">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nam iste quod, nisi illum molestias tenetur voluptas facilis quos. Nulla aperiam dignissimos sapiente dicta repudiandae in quo natus ea consequuntur vel!
      Harum, temporibus odit voluptatum ratione fugit obcaecati facere minus facilis eius necessitatibus dolorem nihil quasi maxime, quae et natus laboriosam repudiandae magni, officia sapiente culpa quibusdam in voluptatem repellendus? Officia.
      Natus amet expedita impedit vitae. Quibusdam nisi enim inventore debitis fugit autem, beatae mollitia? Animi, harum? Fugiat quo quae voluptates architecto ea inventore nobis libero, reprehenderit, nulla quia aut ipsum.
     
      Praesentium delectus quis culpa deserunt commodi ab cumque molestias possimus minima. Deleniti, earum optio nesciunt ab quo ipsam incidunt voluptas rem beatae suscipit exercitationem quisquam est sed? Hic, officia explicabo!
      Delectus, amet? Natus maxime nostrum eius aspernatur cum deserunt incidunt tenetur est accusamus saepe voluptate autem consequatur distinctio consequuntur harum vel facere molestiae in velit eveniet atque, odio provident. Ex.
 </div>
  </div>
</div>

БЛОГ НА HUSL

Вставить видео на сайт

Ответы (1 шт):