Как сверстать данную секцию?

Question

[Rostislav]

Конкретно не понятно с блоком видео, как сверстать этот блок если он выступает за рамки контента(размер контента изображен красными линиями по бокам) и оживить его с помощью JS или на чистом HTML/CSS, и сделать это адаптивно.

Answer 1

[abnmt]

Вариант на CSS, но с calc() и vw единицами — просто вычисляем отрицательный margin у блока с видео:
margin = {containerWidth / 2} − 50vw
https://codepen.io/abnmt/pen/gEvLmb

Еще нужно учесть ширину Скроллбара...

Answer 2

[Александр Епихин]

Можно сделать так

Comments

[vaflya]

а двигать через css свойства left и right с помощью jquery

[Rostislav]

Спасибо, за идею.

Answer 3

[SmartBalance]

Container-fluid родителю, а правому/левому контенту задать max-width (обернуть внутренности при необходимости)

Answer 4

[Leo]

Как я понял там видео же? Тогда надо js для сдвига или hover анимацию.

Можно ещё сделать через overflow hidden. Мне кажется все эти решения попахивают савхозом, но рабочим савхозом.

Я бы в итоге сделал чтобы одна секция была бы со сдвигом, а при hover происходил сдвиг на активную область. Это можно без js. Можно сделать изначально посередине для перфектцианизма.

Comments

[Rostislav]

спасибо за вариант.

Answer 5

[Ольга Ветер]

А вы уверены, что это не во всю ширину экрана страница в принципе, и что там есть некий "контейнер" на том уровне, где вы красные линии провели?