Search the Community

В шапке стоит видео, которое я через JS подгружаю и подгоняю под размер экрана. Но при первой загрузке страницы видео не растягивается по ширине экрана. Только если ресайзнуть окно. Что делать? Тестируемое разрешение экрана 1366x768. Вот сам сайт и код: var scWidth; var scHeight; function window_resize() { scWidth = (window.innerWidth > 0) ? window.innerWidth : screen.width; scHeight = (window.innerHeight > 0) ? window.innerHeight : screen.height; $('.scroll_bottom').css('display', (scHeight < scWidth ? 'block' : 'none')); var mainmenu = $('.mainmenu'); var mainvideo = $('#mainvideo'); if (scWidth > 767) { if (mainvideo.length < 1) { mainmenu.prepend('<video muted autoplay loop class="video" id="mainvideo"><source src="/assets/video/bg.mp4" type="video/mp4"></video>'); mainvideo = $('#mainvideo'); } mainvideo.attr('style', ''); if (mainvideo.height() < mainmenu.height()) { // Делаем по всей высоте scale = mainmenu.height() / mainvideo.height(); mainvideo.css('height', mainmenu.height() + 'px'); mainvideo.css('width', (mainvideo.width() * scale) + 'px'); if (mainvideo.width() > mainmenu.width()) { trim = (mainvideo.width() - mainmenu.width()) / 2; mainvideo.css('left', -trim + 'px'); } } else { // Делаем по всей ширине scale = mainmenu.width() / mainvideo.width(); mainvideo.css('width', mainmenu.width() + 'px'); mainvideo.css('height', (mainvideo.height() * scale) + 'px'); if (mainvideo.height() > mainmenu.height()) { trim = (mainvideo.height() - mainmenu.height()) / 2; mainvideo.css('top', -trim + 'px'); } } } else if (mainvideo.length) { mainvideo.remove(); } } window_resize(); $(window).resize(window_resize); В атрибуте style ему задана правильная ширина, но само видео почему-то по ней не растянулось. Только после ресайза окна растягивается

Всем доброго времени суток. В процессе работы над очередным проектом столкнулся с проблемой: есть элемент video, который расположен внутри элемента для которого заданы transform: translateX и transition. Если перейти в полноэкранный режим видео, а потом его свернуть (вернуть в нормальный режим), то родительский контейнер анимируется. Копаясь в консоли разработчика обнаружил, что на время полноэкранного режима для всех родителей тега video сбрасываются некоторые css стили (в т.ч. transform и transition), что похоже и приводит к появлению анимаций после выхода из fullscreen. Применение флага important к моим стилям результата не принесло (кроме того что после этого еще и само видео при переходе в полноэкранный режим начало анимироваться). Прошу помочь мне разобраться с этим нелегким делом. Пример проблемы: https://codepen.io/ows_nightwolf/pen/mmeByp

Подскажите пожалуйста: 1. как сделать так, чтобы видео на сайте загружаемое с youtube проигрывалось в IE8 и 9? (проблеvиы с тегом iframe) 2. является ли кроссбраузерным использование flash плеера?

Всем привет! Заметил такую особенность, что при удалении тега <video> со страницы и даже при обnull'ении переменной видео все равно продолжает скачиваться с сервера. Как можно оставить загрузку? Спасибо!

Здравствуйте! Не могу понять, как убрать чёрные полосы по бокам видео. Вот скриншот А вот сам код : <div class="video-container"> <iframe src="https://vid.me/e/VWeY?stats=1" height="315" width="560" allowfullscreen="" frameborder="0"> </iframe> </div> .video-container { position: relative; padding-bottom: 58.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-container iframe { position: absolute; top:0; left: 0; width: 100%; height: 100%; } Благодарю за ответ!

Подскажите пож, существует ли способ (в теге <video>) задать размер видео по размеру браузера. Чтобы изменяя размер окна браузера видео оставалось "вписано", при этом масштабировалось и нигде не появлялись пустоты. Вот что у меня максимум получилось: http://romaxprom.by/tmp/video/vd.html Ролик mp4, смотрите в Хроме. Если окно сделать узким, видео уходит вверх, а снизу появляется пустота.

Здравствуйте. Каким-то образом можно остановить воспроизведение видео, которое выводиться с помощью iframe? И при возможности отключить его автозапуск. Нашел решение менять src, но в хроме оно все равно начинает воспроизводится.

Привет! Никто не знает, как принудительно заставить браузер подгрузить видео. Дело в том, что иногда оно загружается очень уж медленно. Но если поставить его на паузу, то загрузка происходит довольно быстро. С чем связано такое поведение? И можно ли как-то заставить браузер так же быстро его грузить, не ставя при этом видео на паузу. Написал небольшой костыль. За это время успевают подгружаться 4-5 минутные видео точно, может и больше: video.play();setTimeout(function() { video.pause(); setTimeout(function() { video.currentTime = 0; video.play(); }, 1000);}, 500);Заранее спасибо!

Привет тебе читатель, эт снова я, снова выдалась свободная минутка и я спешу поделиться с тобой интересным рецептом, который позволит создать у потенциального клиента так называемый вау-эффект. Не секрет, что сейчас очень популярны лендинг пейджи (лендинги, посадочные страницы, называйте как хотите). Нужны они для того, чтобы по-быстрому привлечь внимание у посетителя к вашему проекту. На какие только ухищрения не идут дизайнеры таких страниц: это и, ставший очень популярным в последнее время, параллакс-эффект, и красочные картинки из фотобанка, и сумасшедшего вида карусели изображений... И вот в последнее время редко-редко можно увидеть видео на фоне. Собственно видео я и заинтересовался. Я долго думал как бы мне это повторить, может я плохо гуглил, но туториала в сети я так и не нашел. Поэтому взял да и сделал всё сам Сперва думал написать сюда развернутый туториал, но потом подумал и решил просто дать ссылку на своё решение. Уж слишком простым оно оказалось, нет смысла тут много расписывать. В общем глядите чо я умею: http://codepen.io/GreatRash/pen/MYVjVE А вот чего можно замутить в дикой природе, используя эту технику: раз два А то привязались, понимаешь к параллаксу... Творите и удивляйте, товарищи!

Подскажите, как можно отцентрировать блок #myblock поверх видео? <div id="trailer" class="is_overlay"><video id="video" width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto"><source src="http://5thedgestudio.at.ua/img/back.mp4"></source></video></div><div id="myblock">Мои любые данные</div>.is_overlay{ display: block; width: 100%; height: 100%; }#trailer {position: fixed;top: 0; right: 0; bottom: 0; left: 0;overflow: hidden;;}#trailer > video {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index:-1000;}@media (min-aspect-ratio: 16/9) {#trailer > video { height: 300%; top: -100%; }}@media (max-aspect-ratio: 16/9) {#trailer > video { width: 300%; left: -100%; }}/* Если есть поддержка object-fit (Chrome/Chrome для Android, Safari в iOS 8 и Opera), используем его: */@supports (object-fit: cover) {#trailer > video {top: 0; left: 0;width: 100%; height: 100%;object-fit: cover;}}#myblock {margin: 0 auto;width:1000px;z-index:9999;}Сейчас блок #myblock даже поверх не отображается

Доброго времени суток. А ни у кого, случайно, нет заготовки для плеера. Хочу использовать http://oblakahaus.ru Что то я только методом тыка не могу понять, как убрать воспроизведение с нажатие на само видео http://codepen.io/npofopr/pen/EagzeP

Привет всем. Помогите с оформлением видео на сайт. Хочу сделать видео как миниатюра 160px на 120px. При нажатии на видео он открывается на средний размер просмотра и весь фон вокруг видео темнеет.. Может есть статьи или видеоуроки. Или пример какой знаете. Вот пример http://storage7.static.itmages.ru/i/14/0526/h_1401113037_6440385_d2d588c83f.jpg Вот при открытии видео http://storage5.static.itmages.ru/i/14/0526/h_1401114325_7394666_92e4426726.jpg

Не могу сообразить как сделать следующее. Делается в Bootstrap 2.3.2. Имеется картинка монитора, в ней видео(допустим iframe) Есть решения на css-tricks Я пробовал - и получается что либо само видео у меня корректно меняет размер, либо бек. Сейчас сама конструкция выглядит как <div class="video"><iframe width="542" height="305" src="http://www.youtube.com/watch?v=niyFA24H5_E?rel=0&hd=1" frameborder="0" allowfullscreen></iframe></div> .video {width: 542px;padding: 28px 29px 0 54px;height: 485px;float: left;background: url("../images/screen.png") no-repeat 25px 0;} Если добавить враппер под респонсивку такого плана .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%; } То возникает проблема с экраном)))) Видео скалится ОК, а картинка режется и падает под видео.... Вобщем, нужно решить задачу: адаптивный бекграунд+видео в отдельно взятом блоке...Если у кого есть рабочий пример - дайте плиз ссылку? Спасибо.

Собственно, если кому будет интересно, не сколько ради оценки, сколько для поделиться опытом ... Проект Mindstages, написанный за полтора месяца вдвоем для создания презентаций в режиме онлайн. То есть, идея была следующей: У пользователя есть фиктивно неограниченный монтажный стол, который помогает разложить какие-то объекты на плоскости, сделать для них расшифровку, задать анимацию и сохранить все на сервере. Любой человек может посмотреть онлайн перзентацию. Timeline несколько урезан в связи с тем, что отрефакторить игрушечку мы не успели. На проекте использован хардкорный JS, jQuery и Canvas. jQuery нас подвел т.к. есть много багов, которые просто так не заметны и выползают из версии в версию. Данные планировалось передавать c помощью web-sockets, а сервеная часть в основном сделана на Nodo.JS( извините, выложить не могу ) ... В целом можете забрать сорцы и поиграться с начинкой вот тут. Вообще мы могли уработать Adobe через пару лет, но у нас не было подходящего финансирования и команды. Поднято много опыта, понято много интересного( user exp, ui design, серьезные программы, данные, HTML и JS, будущее и реалии ) ...