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

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

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

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

Ааа, всё, нашел)))

if(canScroll){
                    var averageEnd = getAverage(scrollings, 10);
                    var averageMiddle = getAverage(scrollings, 70);
                    var isAccelerating = averageEnd >= averageMiddle;

                    //to avoid double swipes...
                    if(isAccelerating && isScrollingVertically){
                        //scrolling down?
                        if (delta < 0) {
                            scrolling('up', scrollable);

                        //scrolling up?
                        }else {
                            scrolling('down', scrollable);
                        }
                    }
                }

Используйте data-атрибуты.

<div id="myid" data-material_id="1"></div>
<script>
$("#myid").data('material_id');
</script>

А с такими "классами" Вас валидаторы запинают)

https://jsfiddle.net/webirus/k0nay43f/3/
JS там не нужен. position + z-index верные выставить просто надо.
Желтым выделил, чтобы показать, какое должно быть меню.

https://jsfiddle.net/webirus/k0nay43f/4/
Тут вариант с плавным появлением, если оно нужно.

https://jsfiddle.net/webirus/k0nay43f/5/
Ну и последний вариант, ковёр на всю страницу.

PageTransitions.js
https://github.com/codrops/PageTransitions
tympanus.net/Development/PageTransitions
Rotate > Cube > To Top

https://habrahabr.ru/sandbox/53177/

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

Для "зеленого робота" тоже есть подобная met-ка, не помню только.