0

Всем привет! Был бы очень благодарен за совет касательно верстки: На странице есть блок с заданным бэкргаунд фоном в виде картинки ноутбука. Вопрос мой заключается в том что надо поместить во внутрь изображения видео с ютуба. Чисто теоретически, мне это удалось, но блок с видео не адаптивный и на маленьких разрешениях съезжает. Буду рад услышать как можно сделать видео адаптивным. Прилагаю код и скрины. Как должно видео смотретьсяВот здесь видео съезжает

.videoWrapper 
	position: relative
	padding-bottom: 56%
	height: 0

.videoWrapper iframe
	position: absolute
	top: 38px
	left: 138px
	width: 71%
	height: 82%

.video-block
	width: 100%
	max-width: 1000px
	margin: 0 auto
	min-height: 616px
	background: url('../images/laptop_1.png') no-repeat
	background-size: contain
  



<!-- begin snippet: js hide: false console: true babel: false -->

3
  • left: 138px отсюда отступ идет думаю.. медиазапросы добавь
    – Volodymyr
    5 фев 2017 в 17:51
  • @Volodymyr здравствуйте, вы предлагаете на медиа запросах менять left для выравнивания?
    – Webdev96
    5 фев 2017 в 17:52
  • на мелких экранах да..отступ нужно менять.. ну или в % отступ сделать
    – Volodymyr
    5 фев 2017 в 18:42

1 ответ 1

1

Какие могут быть пиксели при адаптивной верстке? В общем, все не так. Вот код:

<body>

<div id="video">
    <div class="video-container">
        <iframe src="https://www.youtube.com/embed/WlnexV2eAvI" frameborder="0" allowfullscreen="">
        </iframe>
    </div>
</div>

<style>
    body {
        background: #c2c2c2;
    }
    #video {
        width: 70%;
        margin: auto;
        background: url(/wp-content/uploads/2017/02/4.jpg) no-repeat top center;
        background-size: contain;
    }
    .video-container {
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
    }
    .video-container iframe {
        position: absolute;
        top: 7.3%;
        left: 17%;
        margin: auto;
        width: 64.8%;
        height: 64.8%;
    }
</style>

</body>

Вот работающий пример.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.