Адаптивные изображения и видео на вступительной странице

Question

Адаптивные изображения и видео на вступительной странице

0

Я разрабатываю страницу ввода. Я помещаю на эту страницу фоновый рисунок и видеоролик, а также хочу получить представление о рабочем столе на мобильном телефоне. я попробовал следующий код:

CSS:

.trailer-content {
    max-width: 75%;
    width: 600px;
    margin-left: auto;
    margin-right: auto;

}
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: fixed;
    bottom:40px !important;
    width: 50%;
    height: 50%;
    margin-left: auto !important;
    margin-right: auto !important;
}
#background {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}
.stretch {
    width:100%;
    height:100%;
}

html:

<div id="background">
     <img src="img/bg.jpg" class="stretch" alt="" />
</div>
<div class="trailer-content">
     <div class="video-container"><iframe width="420" height="315"     src="//www.youtube.com/" frameborder="0" allowfullscreen></iframe>
     </div>
</div>

Результат вывода

фон выглядит растянутым
видео нормально работает на рабочем столе, но в мобильном режиме видео также растягивается до определенного размера.

viji 19 март 2014, в 06:42

Источник

Теги:

html

css

background-image

video

responsive-design

3 ответа

0

И снова я должен заметить никогда не использовать ID для стилизации

Для правильного решения вашего дела

Самый простой способ - использовать ссылку @media w3school

В этом случае у вас будет любое количество различных правил, которые применяются к одному и тому же классу, но в разных ситуациях.

Этот способ намного лучше, чем просто растянуть видео или фон, потому что вы будете иметь полный контроль над всеми элементами. Они будут вести себя так, как вы хотите, чтобы они вели себя на разных устройствах.

UtherTG 19 март 2014, в 04:33

-1

удалить высоту: 100% от #background... так что изображение будет растягиваться на 100% по ширине, но сохранить правильные размеры.

Тем не менее, я думаю, лучше, если вы положите его в качестве фона в теле, как это:

body{background:url(img/bg.jpg);
background-repeat:no-repeat;
background-size:100% auto;}

Для тегов видеофрагментов, содержащих видео, исправление высоты может также масштабировать видео.

Вы также можете установить определенную ширину, высоту и т.д., Используя meidatypes, более подробную информацию о отзывчивом веб-дизайне (RWD) можно найти здесь http://www.hongkiat.com/blog/responsive-web-tutorials/

Medda86 19 март 2014, в 04:05

Ещё вопросы

newTag · Accepted Answer · 2014-03-19T03-42-00.000Z

Отзывчивое фоновое изображение:

html { 
  background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSvctt0I--skoKQVfuVt-i4Et6vQ5ve7lXPkLy9sTElCWLKh1Ps) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

См. Демонстрацию

Отзывчивое видео:

HTML:

<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

CSS:

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

См. Демонстрацию