Адаптивные изображения справа и слева от Youtube (Iframe) в Bootstrap 3

У меня был случай, который я не могу понять, как решить. У меня есть раздел Bootstrap 3, где видео находится в центре. Мне нужно добавить одно изображение слева от края видео, второе изображение справа от края видео. Так же, как я задумал на картинке.

Я пытался сделать это с position: absolute; и все было нормально, но при масштабировании экрана возникают проблемы. Как сделать так, чтобы изображения выглядели так, как будто они есть на изображении, но все ли в порядке с отзывчивостью? Адаптивные изображения справа и слева от Youtube (Iframe) в Bootstrap 3

<link href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel = "stylesheet"/>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<section id = "trailer">
    <div class = "container">
        <div class = "row">
<div class = "col-sm-12">
<img src = "http://via.placeholder.com/170x400" alt = "" class = "trailer_wrapper--one img-responsive">
<div class = "embed-responsive embed-responsive-16by9">
<iframe class = "embed-responsive-item" src = "//www.youtube.com/embed/PGNiXGX2nLU"></iframe>
</div>
    <img src = "http://via.placeholder.com/170x300" alt = "" class = "trailer_wrapper--two img-responsive">    
</div>
        </div>
    </div>
</section>
</html>

html css twitter-bootstrap twitter-bootstrap-3 responsive

22.03.2018 12:03

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы можете сделать это, разделив sm-12 на 2 + 8 + 2

.pl-0 {
	padding-left: 0 !important;
}
.pr-0 {
	padding-right: 0 !important;
}

<link href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel = "stylesheet"/>
<section id = "trailer">
  <div class = "container">
    <div class = "row">
      <div class = "col-xs-2 pr-0"> <img src = "http://via.placeholder.com/170x400" alt = "" class = "trailer_wrapper--one img-responsive"> </div>
      <div class = "col-xs-8 pl-0 pr-0">
        <div class = "embed-responsive embed-responsive-16by9">
          <iframe class = "embed-responsive-item" src = "//www.youtube.com/embed/PGNiXGX2nLU"></iframe>
        </div>
      </div>
      <div class = "col-xs-2 pl-0"> <img src = "http://via.placeholder.com/170x300" alt = "" class = "trailer_wrapper--two img-responsive"> </div>
    </div>
  </div>
</section>

22.03.2018 12:30

    Hi Since you are using bootstrap, please align your code with bootstrap grid system, 

<link href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel = "stylesheet"/>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<style>
img{
    width:30px;height:30px;
}
.embed-responsive{
    width:100%;
}
</style>
<section id = "trailer">
    <div class = "container">
        <div class = "row">
<div class = "col-sm-2 col-md-2 col-xs-2 col-lg-2">
<img src = "http://via.placeholder.com/170x400" alt = "" class = "trailer_wrapper--one img-responsive"/>
</div>
<div class = "col-sm-8 col-md-8 col-xs-8 col-lg-8">
<div class = "embed-responsive embed-responsive-16by9">
<iframe class = "embed-responsive-item" src = "//www.youtube.com/embed/PGNiXGX2nLU"></iframe>
</div>
</div>
<div class = "col-sm-2 col-md-2 col-xs-2 col-lg-2">
    <img src = "http://via.placeholder.com/170x300" alt = "" class = "trailer_wrapper--two img-responsive">  
    </div>
</div>

    </div>
</section>
</html>

You can style the height and width of image as per your need. This makes your website looks responsive and good looking.
Happy coding !! :)

22.03.2018 13:50

Другие вопросы по теме

CSS - изменить отображение div с сетки на flexbox с медиа-запросами

Как показать кнопку при нажатии кнопки на ionic3

CSS - Невозможно сделать изображения одинакового размера независимо от того, какой у них размер изначально?

Пользовательский курсор CSS не работает в Chrome

Выровняйте элементы Flexbox по горизонтали с помощью разворачиваемого элемента переменной ширины

Как центрировать гибкий элемент?

Раскрывающееся меню вложенного меню HTML / CSS

Как создать собственную сетку кнопок в Bootstrap 4?

Таблица не закреплена сверху после прокрутки вниз с помощью jquery

Поделиться 100vh между div и position: липкая панель навигации

Адаптивные изображения справа и слева от Youtube (Iframe) в Bootstrap 3

Ответы 2

Другие вопросы по теме

Похожие вопросы