Сергей Горячев

как обычно через файл style.css, но основные стили, как оказалось, прописаны в файлах bootstrap.css и bootstrap.min.css

Поставить style.css в коде сайта (порядок подключения) ниже кода бутстраповских файлов.

даже вообще удалять файлы bootstrap.css и bootstrap.min.css и также сайт остаётся без изменений

А вы вообще уверены, что стили именно там прописываются? При удалении файла стилей, который используется, стили обязаны удаляться.

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

На айфоне не запустится, как ни старайся. Это особенность айфона, защита траффика.

UPD: Спасибо Anton fon Faust за добавление информации по Айфонам
https://github.com/bfred-it/iphone-inline-video

Рабочее решение для андройда тут https://arm1.ru/blog/html5-video-kak-fon-stranitsy

С Android тяжелее всего. Автопроигрывание не работает. Кнопка Play появляется только если добавить для тэга video аттрибут controls, чтобы появились стандартные контролы управления. Это, увы, не так уже красиво. Но это ещё не всё. Для того, чтобы видео начало играть, нужно ещё добавить дополнительно Javascript-обработчик, который принудительно скажет video, чтобы оно играло:

var video =  document.getElementById(element);
video.addEventListener('click',function(){
	  video.play();
},false);

Для определения Android, чтобы добавить аттрибут controls, я просто использовал Detect.js:

var ua = detect.parse(navigator.userAgent);
if ( ua.os.family === 'Android' ) {
	video.setAttribute( 'controls','controls' );
}

PS: А вообще, я бы рекомендовал на мобильных устройствах не показывать видео.
Просто сделать красивую фоновую картинку, реально, зачем тратить трафик людей.
Не все сидят именно с WI-FI, и важна скорость загрузки сайта с телефона.

Когда-то давно, делал подобное через viewportchecker.js.
В момент скролла до блока через replaceWith подгружал блок с видео.
Для красоты там еще стоял небольшой прелоадер.
https://jsfiddle.net/webirus/tt0uf3sj/ - добавление всего блока
https://jsfiddle.net/webirus/tt0uf3sj/1/ - добавление источников в html

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


Почему именно 15 пикселей, это надо спросить у Бутстрапа.
Я например, всегда делаю контейнер 95%, и ограничиваю 1200 пикселей.
То есть у меня нет четкого паддинга, чем меньше экран, тем меньше паддинг.

Как-то так) Без SVG и для любого фона)
https://jsfiddle.net/webirus/qm7sxj2x/1/

style.css

.block { } // правильно
.block .elem { } // правильно

media.css

@media screen and (max-width: 1000px) {
    .elem { } // не правильно
    .block .elem { } // правильно
}

Это не ошибка хостинга, а ошибка Joomla.
Собственно, там всё написано, в коде ошибка, не закрытый "<".

https://jsfiddle.net/webirus/e1mtr4sq/1/
Еще как вариант, через псевдоэлементы)

ru.stackoverflow.com/questions/382662/%D0%9F%D0%BE...
Оно?

А может не надо извращаться?
www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp
Если уж юзаете Бутстрап, юзайте по полной.