Страница 1 из 11
Форум » Дизайн » Оценка работ » Страница технических работ видео как background
Страница технических работ видео как background
PheonixICQ Offline
Проверенный
15
Дата: Понедельник, 14.04.2014, 15:12 | Сообщение # 1
Привет. Хочу сделать страницу "Технические работы на сайте". В background хочу запихать видеоролик, это я уже сделал. Сейчас я стараюсь добиться background без черных полос.

Зайдите сюда если у вас будут черные полосы напишите пожалуйста в эту тему разрешение экрана.

И вообще как вы считаете красиво ли будет использовать такие background для некоторых страниц? Сейчас на заднем фоне стоит Daft Punk просто мне они нравятся). Видео взято с coub. И вообще если кого то интересует такая реализация заднего фона вот код:
Код

<body style="overflow: hidden; width: auto; height: auto;">
<div class="shortPromoPage">
<div class="backgroundCoub">
<iframe src="http://coub.com/embed/t3yo?autoplay=true&muted=false&no_controls=true&start_onload=true&startWithHD=true" allowfullscreen="true" frameborder="0" autoplay="true" style="margin:-24px 0 0 -140px;"></iframe>
<div class="coubOverlay"></div>
</div>
<div class="descWrap">
Здесь может быть любой текст поверх видео. он не стилизован. Стилизуйте сами.
</div>
</div>
</div>
</body>
<style>
.descWrap{position:absolute;width:590px;top:17%;margin:0 auto;z-index:2;}
.shortPromoPage{position:absolute;height:100%;width:100%;top:0;left:0;right:0;bottom:0;background:#000}.shortPromoPage .backgroundCoub{position:absolute;z-index:1}.shortPromoPage .backgroundCoub .coubOverlay{position:absolute;left:0;top:0;right:0;bottom:0
</style>
<script>
document.getElementsByTagName('IFRAME')[0].style.width = 400+screen.availWidth+'px';
document.getElementsByTagName('IFRAME')[0].style.height = screen.availHeight+'px';
</script>

Ну и сами настройки видео. Все главные настройки находятся в ссылке на видео. Все значение boolean типа (true\false).
autoplay - автозапуск (при значении false видео просто не запустится а сам пользователь его запустить не сможет).
muted - Воспроводить без звука
no_controls - Значек coub справа внизу
startWithHD - Запуск видео в HD если таковое качество имеется
start_onload -Запуск после загрузки


Хорошие книги про javscript:
JavaScript. Подробное руководство (6-е издание) [2012, PDF, RUS]
Выразительный Javascript, 2-е издание (2015, PDF/EPUB/MOBI, RUS)
-------
Посмотри чем вебмастера балуются


Сообщение отредактировал PheonixICQ - Понедельник, 14.04.2014, 15:15
Профиль
fil_ru Offline
Проверенный
56
Дата: Вторник, 15.04.2014, 10:44 | Сообщение # 2
Вот тебе скрипт: http://dfcb.github.io/BigVideo.js/
Профиль
PheonixICQ Offline
Проверенный
15
Дата: Пятница, 25.04.2014, 23:13 | Сообщение # 3
Спасибо, но я допилил с coub и теперь под любой экран встанет как влитой! И без лишних js кодов. Всего то требовалось.
Код
var e,c,a,b,d,f,g;
e = $(".backgroundCoub iframe");
c = $(".backgroundCoub");
b=e.width();
a=e.height();
f=b/a;
g=$(window).width();
d=$(window).height();
c.css({"margin-left":-1*(g/2)});
c.css({"margin-top":-1*(d/2)});
//g=d*f;
d=g/f;
$("body").css({"height":screen.height+"px"});
e.attr("height",d).attr("width",g);


Хорошие книги про javscript:
JavaScript. Подробное руководство (6-е издание) [2012, PDF, RUS]
Выразительный Javascript, 2-е издание (2015, PDF/EPUB/MOBI, RUS)
-------
Посмотри чем вебмастера балуются


Сообщение отредактировал PheonixICQ - Пятница, 25.04.2014, 23:14
Профиль
fil_ru Offline
Проверенный
56
Дата: Пятница, 25.04.2014, 23:15 | Сообщение # 4
PheonixICQ, Молодец, держи + в репутацию:)
Профиль
fil_ru Offline
Проверенный
56
Дата: Суббота, 26.04.2014, 00:26 | Сообщение # 5
С iPhone не воспроизводится::)

Профиль
Ilia Offline
Проверенный
45
Дата: Суббота, 26.04.2014, 14:23 | Сообщение # 6
Легче сделать через <video>, и задать ему css
Код
position:absolute;
width:100%;
height:100%;
z-index:100


Профессиональный дизайн сайтов, логотипов, ui/ux.
Только до конца месяца скидка 25% на все услуги!
Профиль
fil_ru Offline
Проверенный
56
Дата: Суббота, 26.04.2014, 15:01 | Сообщение # 7
Цитата Ilia ()
Легче сделать через <video>, и задать ему css

Будет интерфейс.
Профиль
PheonixICQ Offline
Проверенный
15
Дата: Суббота, 26.04.2014, 16:17 | Сообщение # 8
Не ребятки, поздно отступать я допилю чтобы все таки на всех мониторах отображалось норм.

Хорошие книги про javscript:
JavaScript. Подробное руководство (6-е издание) [2012, PDF, RUS]
Выразительный Javascript, 2-е издание (2015, PDF/EPUB/MOBI, RUS)
-------
Посмотри чем вебмастера балуются
Профиль
Ilia Offline
Проверенный
45
Дата: Воскресенье, 27.04.2014, 14:54 | Сообщение # 9
Цитата fil_ru ()
Будет интерфейс.

Не обязательно. Можно через атрибуты сделать autoplay и убрать интерфейс.


Профессиональный дизайн сайтов, логотипов, ui/ux.
Только до конца месяца скидка 25% на все услуги!
Профиль
Форум » Дизайн » Оценка работ » Страница технических работ видео как background
Страница 1 из 11
Поиск: