html — Как сделать чтобы видео на фоне подстраивалось под разрешение экрана, но и мотать вниз можно было?
Вопрос задан
Изменён 1 год 3 месяца назад
Просмотрен 188 раз
У меня есть видео на фоне.
#myVideo {
-moz-background-size: 100%;
-webkit-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
z-index: -1000;
opacity: 1;
}<video autoplay muted loop>
<source src="../mp4/Fon_2.mp4" type="video/mp4">
</video>Как сделать чтобы видео подстраивалось под разрешение экрана, но и мотнуть, чтобы видео уходило вверх? Вообщем как на этом сайте https://rpcs3.
net/
- html
- css
- css3
- html5
- видео
Все просто 🙂
#myVideo {
width: 100vw;
height: 100vh;
}<video autoplay muted loop>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
1
в отдельный div оберни его и все, и будет у тебя видео в фоне блока, а не всего backround
а, ну и
... position: fixed; ...
тогда не нужен
Ну и вариант номер два, это подключить jQuery и плагин jquery.vide.js и просто добавляем атрибут data-vide-bg=»path/video» к нужному блоку.
<div data-vide-bg="/demo/vide/video">
<div>
Адаптивное видео для фона
</div>
</div>
вот тут описано: https://atuin.ru/blog/adaptivnoe-video-dlya-fona-bloka/
Зарегистрируйтесь или войдите
Регистрация через Google Регистрация через Facebook Регистрация через почтуОтправить без регистрации
ПочтаНеобходима, но никому не показывается
Отправить без регистрации
ПочтаНеобходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
html — Как сделать сайт адаптивным для одинакового разрешения экрана, но разного размера?
Задать вопрос
Вопрос задан
Изменён 6 лет 1 месяц назад
Просмотрен 371 раз
Доброго времени суток, есть 2 монитора, один с диагональю 23 и разрешением 1920×1080, на нем я и делаю сайт, и отталкиваюсь от него, создавая адаптивность для разрешений поменьше, используя стандартное средство браузеров для проверки адаптивности, к примеру когда я проверяю разрешение 1366×768 и создаю для этого разрешения стили, то все нормально, однако стоит открыть сайт на ноутбуке с разрешением 1366×768 дизайн немного отличается от того, что показывает инструмент браузера для того же разрешения, к примеру, если в инструменте для 1366 все ровно, то на ноуте с тем же разрешением немного все плывет вниз, как с этим быть ? И второй момент, есть маленький ноут с диагональю 15 и разрешением 1920×1080, и так все стили по умолчанию, которые и делались под это разрешение — плывут, но на мониторе с тем же разрешением все нормально, как сделать стили для одного разрешения но разного размера устройств ?
- html
- css
- bootstrap
- адаптивная-верстка
Сложно будет добиться «идентичности» на разных устройствах.
Начните с добавления <meta name="viewport" content="width=device-width, initial-scale=1"> (в head)своего сайта. Опять же если не вникать в проблемы кроссбраузерности.
Можно попробовать отказаться от размеров в px а перейти на em/rem или же вообще на vw/vh
Если я правильно понимаю вопрос то в стилях нужно использовать относительные размеры в em/rem. Хотя лично у меня возникали при этом проблемы связанные с плотностью пикселей на разных устройствах (dpi) — на мониторе одно, на реальном устройстве все уезжает.
Зарегистрируйтесь или войдите
Регистрация через GoogleОтправить без регистрации
ПочтаНеобходима, но никому не показывается
Отправить без регистрации
ПочтаНеобходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
html — Как сделать мой сайт под любой размер экрана?
спросил
Изменено 4 года, 6 месяцев назад
Просмотрено 33 тысячи раз
Я разработал свой сайт в фотошопе, затем использовал инструмент среза и сохранил для Интернета, я пробовал.
[Изменить] Чтобы дать всем немного больше деталей, вот мой код. Это автоматически отформатированный код из опции «Сохранить для Интернета» (я знаю, что это не идеально), однако у меня нет Dreamweaver, поэтому я понятия не имею, как еще это сделать.
<голова>
Кочина на рынке
<дел>
<центр>
<граница таблицы = "0"
ячейка заполнение = "0" ячейки = "0">
<тд colspan="20">
<тд>
<тд рядов = "10">
<тд рядов = "4">
gif"
граница = "0" alt = "">
<тд colspan="18">
<тд>
<тд рядов = "2">
<тд рядов = "2">
<тд рядов = "9">
<тд>
<тд>
gif" alt="">
<тд рядов = "8">
<тд>
<тд рядов = "7">
<тд рядов = "7">
<тд>
<тд рядов = "6">
<тд>
<тд рядов = "5">
<тд colspan="5">
html">
<тд рядов = "5">
<тд>
<тд рядов = "4">
<тд colspan="3">
<тд рядов = "4">
<тд>
<тд colspan="2">
<тд colspan="3">
<тд colspan="3">
<тд>
<тд>
facebook.com/cocinaomarket">
<тд рядов = "2">
<тд рядов = "2">
<тд>
<тд рядов = "2">
<тд рядов = "2">
<тд>
<тд рядов = "2">
<тд>
<тд>
<тд>
gif" alt="">
<тд>
<тд>
<тд>
<тд рядов = "4">
<тд>
<тд>
<тд>
<тд рядов = "7">
<тд>
<тд>
<тд colspan="3">
<тд>
<тд colspan="3">
<тд colspan="3">
<тд>
<тд рядов = "2">
<тд рядов = "2">
<тд>
<тд рядов = "2">
<тд>
<тд>
<тд>
<тд>
` в css без везения. Любые идеи? Вот скриншот, чтобы вы могли увидеть, о чем я говорю маржа: 0; ширина: 100vw; высота: 100вх; } дел { ширина: 100vw; высота: 100вх; }
vw означает viewport-width , что означает 100% того, что видит пользователь (по ширине). vh означает viewport-height , то же самое но по высоте
я думаю, это то, что вам нужно
div {
максимальная ширина: 768 пикселей;
максимальная высота: 1024px;
маржа: авто;
дисплей: блок;
}
0Можно попробовать так:
html, body {width: 100vw; высота: 100вх;}
div {ширина: 100%; высота: 100%}
Думаю сработает
1 В качестве единиц ширины и высоты можно использовать vw и vh.
корпус{
маржа: 0;
}
дел {
ширина: 100vw;
высота: 100вх;
}
Подходит для любого устройства.
Редактировать:
Заметили, что вы пытаетесь создать веб-сайт с элементом таблицы. Обычно мы так не делаем.
width="1001" ограничивает ширину и высоту, поэтому приведенное выше решение vw , vh не работает.
Предлагаю вам построить сайт из div или других элементов. Не полагайтесь на фотошоп.
Ширина вашей основной таблицы (обертки) определяется в этой строке:
