Страница технических работ видео как background

Новые сообщения · Правила форума · Поиск

Оставить отзыв · Пожаловаться · RSS

Страница 1 из 1
1

PheonixICQ Оффлайн

Проверенный

Дата: Понедельник, 2014-04-14, 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 - Понедельник, 2014-04-14, 15:15

Профиль

fil_ru Оффлайн

Проверенный

Дата: Вторник, 2014-04-15, 10:44 | Сообщение # 2

Вот тебе скрипт: http://dfcb.github.io/BigVideo.js/

Профиль

PheonixICQ Оффлайн

Проверенный

Дата: Пятница, 2014-04-25, 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);

Сообщение отредактировал PheonixICQ - Пятница, 2014-04-25, 23:14

Профиль

fil_ru Оффлайн

Проверенный

Дата: Пятница, 2014-04-25, 23:15 | Сообщение # 4

PheonixICQ, Молодец, держи + в репутацию:)

Профиль

fil_ru Оффлайн

Проверенный

Дата: Суббота, 2014-04-26, 00:26 | Сообщение # 5

С iPhone не воспроизводится::)