Видеоплеер Vimeo & iPhone & iPad Style controls / Видеоплееры / Сниппеты Bootstrap

Версия: v1.0.1

Каталог: Сниппеты Bootstrap

Категория: Видеоплееры

Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Русский

Уникальный ID: 277

Количество символов:

Посмотрели: 3389 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 4.4 / 5 - 7 голосов

Тип лицензии: CC BY 4.0

Авторство: http://u.to/yP8_DQ

Информация: Пользователям

Информация: Правообладателям

Теги: Snippet, видео, video, сниппет, Bootstrap, Vimeo, html, вимео, бутстрап

Поделился: aTmpl

Добавлено: 2015-12-08 в 15:06

Метка: 1582103391

⇄ ⇅

.overlay {width:100%; height:0; padding-bottom:56.25%; overflow:hidden; position:relative; margin:0 auto;}
.overlay iframe {width:100%; height:180%; position:absolute; left:0; top:-40%; z-index:-1;}

.playpause {width:65px; height:40px; background: rgba(0,0,0,0.8); border-radius:5px; position:absolute; left:0; top:0; right:0; bottom:0; margin:auto; z-index:100; opacity:1; cursor:pointer;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.playpause:before {display:block; content:""; width:0; height:0; border-top:10px solid transparent; border-bottom:10px solid transparent; border-left:20px solid #fff; position:absolute; left:23px; top:10px;}
.playpause.pause {opacity:0;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.playpause.pause:before {display:block; content:""; width:6px; height:20px; border-left:6px solid #fff; border-right:6px solid #fff; border-width:0 6px;}
.playpause:hover {background-color:#00adef;}

.overlay:hover .playpause {opacity:1;}
@media only screen and (max-width:768px) { 
.parent {width:90%; margin:50px auto;}
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
.parent {width:50%; margin:50px auto;}
.overlay iframe {height:100%; top:0; z-index:200;}
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
.overlay iframe {height:100%; top:0; z-index:200;}
}

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) {
.overlay iframe {height:100%; top:0; z-index:200;}
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {
.overlay iframe {height:100%; top:0; z-index:200;}
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
.overlay iframe {height:100%; top:0; z-index:200;}
}
</style>

<article class="parent">
 <h5>Оригинальный Видеоплеер</h5>
 <div class="aspectratio">
 <iframe src="http://player.vimeo.com/video/119936528" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
 </div>
 </article>

</div>

<article class="parent">
 <h5>В iPhone и iPad увидите элементы управления</h5>
 <div class="overlay">
 <iframe src="http://player.vimeo.com/video/119936528?api=1&player_id=video" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen id="video"></iframe>
 <div class="playpause start"></div>
 </div>
 </article>
</div>

</div></div></div>

$(function() {
var iframe = document.getElementById('video');
var player = $f(iframe);

player.addEvent('ready', function() {
 player.addEvent('finish', onFinish);
});

$('.playpause').click(function() {
 player.api('paused', function(paused) {
 if (!paused) {
 player.api('pause');
 $(".playpause").removeClass('pause');
 } else {
 player.api('play'); 
 $(".playpause").addClass('pause');
 }
 });
});

function onFinish(id) {
 $(".playpause").removeClass('pause');
}

});

var resizeTimer;
var winWidth = $(window).width();

$(window).resize(function(){
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
newWidth=$(window).width();
if ((newWidth < 400 && winWidth > 400) || (newWidth < 650 && winWidth > 650) || (newWidth < 1000 && winWidth > 1000) || (newWidth > 1000 && winWidth < 1000) || (newWidth > 650 && winWidth < 650) || (newWidth > 400 && winWidth < 400)){
window.location = window.location.pathname;
}
winWidth = newWidth;
}, 250);
}).resize();

});
</script>

BootstrapTema

Видеоплеер Vimeo & iPhone & iPad Style controls

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0