Перейти к содержимому


Фотография
- - - - -

Как сделать видео ролик фоном клан-сайта?

видео фон шаблоны дизайн-пак css стили

Лучший Ответ NeLo, 15 Июнь 2016 - 20:54

Вставьте следующий код в основной шаблон-каркас страниц сайта (см. структура шаблонов), после тега <body>:

<div id="video-bg">
    <video width="100%" height="auto" preload="auto" autoplay="autoplay" loop="loop">
        <source src="ссылка на видео" type="video/mp4"></source>
    </video>
</div>

где "ссылка на видео" – ссылка на mp4 файл, размещенный на каком-либо видео хостинге.

Если нужное видео не в mp4 (например, хотите видео с youtube):

 

1. Выберите видео с youtube, которое Вам нужно, закиньте ссылку в форму на http://youtubeinmp4.com/.

2. Скачайте и разместите где-нибудь конвертированное видео.

3. Подставьте в значение src тега source прямую ссылку.

 

Вы можете использовать другие форматы видео (и другие конвертаторы, соответственно; см. информацию по тегу "video"):

http://htmlbook.ru/html/video

 

Подключите CSS файл со следующими стилями:

#video-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}
 
#video-bg > video {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%; 
    min-height: 100%;
    width: auto;
    height: auto; 
}

CSS прописываются в отдельных файлах с расширением .css, размещаются в директории со стилями дизайн-пака.

Про использование стилей, скриптов, изображений на своем сайте в системе можете прочитать тут:

http://community.gui...i-v-shablonakh/

 

Результат:

 

1-video-background-for-clan-site.png

Перейти к сообщению


  • Закрытая тема Тема закрыта
Сообщений в теме: 9

#1 Zombie

Zombie

    Постоянный участник

  • Участники
  • PipPipPipPip
  • 57 сообщений

Отправлено 15 Июнь 2016 - 00:54

Я наверное надоел вам уже, но... Если всё получится в том, что я сейчас хочу спросить, то больше вопросов у меня не будет  :D

1. Объясните пошагово, подробно, по буквам - как сделать видео фоном сайта? Чтобы оно было именно фоном, а поверх можно было кнопки ставить.

2. Как сделать эти самые кнопки на фоне сайта? Есть ли возможность сделать их анимироваными? Как задать им положение? Тоже пожалуйста по буквам  :D

3. Как убрать блок новостей с главной страницы?

4. Как сделать фон прозрачным?

Прошу прощения за назойливость, но раз уж обновились, хочется сделать свой сайт красивым. Платить веб-дизайнерам за оформление сейчас нет возможности.

Спасибо за понимание и терпение.


Сообщение отредактировал NeLo: 18 Июнь 2016 - 19:17
Заголовок темы изменен для помощи другим пользователям найти ответ на похожий вопрос

  • NeLo это нравится

#2 NeLo

NeLo

    Разработчик

  • Guildmaker Team
  • PipPipPipPipPipPipPipPip
  • 794 сообщений

Отправлено 15 Июнь 2016 - 19:11

1. Объясните пошагово, подробно, по буквам - как сделать видео фоном сайта? Чтобы оно было именно фоном, а поверх можно было кнопки ставить.

 

Начните делать по гайдам из выдачи по запросу:

https://www.google.c...ch?q=html video

 

На htmlbook'е видел хорошую статью про тег video, где описывается как вставить видео.

Там есть пример кода, скопируйте его к себе в дизайн-пак, посмотрите что получилось.

 

В системе есть точно один сайт, который уже так оформлялся, с видео на фоне, можете посмотреть как это реализовано там и перетащить себе:

aaglory.clans.pw



#3 Zombie

Zombie

    Постоянный участник

  • Участники
  • PipPipPipPip
  • 57 сообщений

Отправлено 15 Июнь 2016 - 19:34

 

1. Объясните пошагово, подробно, по буквам - как сделать видео фоном сайта? Чтобы оно было именно фоном, а поверх можно было кнопки ставить.

 

Начните делать по гайдам из выдачи по запросу:

https://www.google.c...ch?q=html video

 

На htmlbook'е видел хорошую статью про тег video, где описывается как вставить видео.

Там есть пример кода, скопируйте его к себе в дизайн-пак, посмотрите что получилось.

 

В системе есть точно один сайт, который уже так оформлялся, с видео на фоне, можете посмотреть как это реализовано там и перетащить себе:

aaglory.clans.pw

 

ого, а как перетащить? с владельцем сайта связаться? я сомневаюсь, что он поделится))

А, понял, код страницы посмотреть? Только я не пойму, где должно находиться само видео?


Сообщение отредактировал Zombie: 15 Июнь 2016 - 19:44

  • NeLo это нравится

#4 NeLo

NeLo

    Разработчик

  • Guildmaker Team
  • PipPipPipPipPipPipPipPip
  • 794 сообщений

Отправлено 15 Июнь 2016 - 20:54   Лучший Ответ

Вставьте следующий код в основной шаблон-каркас страниц сайта (см. структура шаблонов), после тега <body>:

<div id="video-bg">
    <video width="100%" height="auto" preload="auto" autoplay="autoplay" loop="loop">
        <source src="ссылка на видео" type="video/mp4"></source>
    </video>
</div>

где "ссылка на видео" – ссылка на mp4 файл, размещенный на каком-либо видео хостинге.

Если нужное видео не в mp4 (например, хотите видео с youtube):

 

1. Выберите видео с youtube, которое Вам нужно, закиньте ссылку в форму на http://youtubeinmp4.com/.

2. Скачайте и разместите где-нибудь конвертированное видео.

3. Подставьте в значение src тега source прямую ссылку.

 

Вы можете использовать другие форматы видео (и другие конвертаторы, соответственно; см. информацию по тегу "video"):

http://htmlbook.ru/html/video

 

Подключите CSS файл со следующими стилями:

#video-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}
 
#video-bg > video {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%; 
    min-height: 100%;
    width: auto;
    height: auto; 
}

CSS прописываются в отдельных файлах с расширением .css, размещаются в директории со стилями дизайн-пака.

Про использование стилей, скриптов, изображений на своем сайте в системе можете прочитать тут:

http://community.gui...i-v-shablonakh/

 

Результат:

 

1-video-background-for-clan-site.png


Сообщение отредактировал NeLo: 18 Июнь 2016 - 19:29


#5 Zombie

Zombie

    Постоянный участник

  • Участники
  • PipPipPipPip
  • 57 сообщений

Отправлено 15 Июнь 2016 - 21:02

Я сам, если честно, никогда не задавался целью поставить видео на фон сайта.

Достаточно экзотичное явление :)

 

Судя по коду это будет выглядеть так:

<div id="video-bg">
    <video width="100%" height="auto" preload="auto" autoplay="autoplay" loop="loop">
        <source src="ссылка на видео" type="video/mp4"></source>
    </video>
</div>

CSS:

#video-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}
 
#video-bg > video {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%; 
    min-height: 100%;
    width: auto;
    height: auto; 
}

Пробуйте.

 

Можете попросить у создателя сайта готовый дизайн-пак, если договоритесь, конечно. Зарегистрируйтесь у него на форуме, создайте тему:

Уважаемый администратор, я очарован Вашим сайтом, хочу тоже видео поставить у себя на сайте, могу ли я попросить дизайн-пак посмотреть? :) Думаю, Камнегляд против не будет.

Спасибо за попытку помочь с оформлением, но куда эти коды вставлять?)) Где этот CSS находиться, например?

А на форум к ним не попасть, так как нужны права для создания тем.(((


Сообщение отредактировал Zombie: 15 Июнь 2016 - 21:05

  • NeLo это нравится

#6 Zombie

Zombie

    Постоянный участник

  • Участники
  • PipPipPipPip
  • 57 сообщений

Отправлено 16 Июнь 2016 - 16:42

В общем у меня получилось вставить видео на фон, но я просто скопировал код у них aaglory.clans.pw и соответственно воспроизводится их видео. Когда я вставляю ссылку на своё видео, которое находится на youtobe, открывается белый экран. Но это еще не всё, так как видео воспроизводится вверху на весь экран, а если прокрутить страницу вниз, то появляется мой фон, и я ни как не могу понять, как же сделать один экран и чтобы на фоне видео можно было поставить png картинку с названием клана, ну и кнопки краю экрана, а не по середине.

Вот что получилось: http://energy.clans.pw/


  • NeLo это нравится

#7 Zombie

Zombie

    Постоянный участник

  • Участники
  • PipPipPipPip
  • 57 сообщений

Отправлено 18 Июнь 2016 - 18:28

Я так понимаю мне тут уже не ответят?


  • NeLo это нравится

#8 NeLo

NeLo

    Разработчик

  • Guildmaker Team
  • PipPipPipPipPipPipPipPip
  • 794 сообщений

Отправлено 18 Июнь 2016 - 18:35

Пробовали поставить стили из сообщения выше?

http://community.gui...n-saita/?p=1834

 

Какой результат?



#9 Zombie

Zombie

    Постоянный участник

  • Участники
  • PipPipPipPip
  • 57 сообщений

Отправлено 18 Июнь 2016 - 18:44

Пробовали поставить стили из сообщения выше?

http://community.gui...n-saita/?p=1834

 

Какой результат?

Так я же чуть выше Вам всё расписал.


  • NeLo это нравится

#10 NeLo

NeLo

    Разработчик

  • Guildmaker Team
  • PipPipPipPipPipPipPipPip
  • 794 сообщений

Отправлено 18 Июнь 2016 - 19:00

Так я же чуть выше Вам всё расписал.

 

Про поводу youtube видео на фон, кстати, нетривиальная задачка будет:

http://stackoverflow...html5-video-tag

 

Можете попробовать хитрый, сложный трюк, описанный в "лучшем" ответе. Правда, через некоторое время, как пишут, видео может стать недоступным: изменится URL для вставки в video тег (а вариант с  http://youtubeinmp4.com/ отпадает, т.к. для хранения и шаринга видео наш хостинг не предназначен).

 

В общем, что могу посоветовать:

 

1. Выберите видео с youtube, которое Вам нужно, закиньте ссылку в форму на http://youtubeinmp4.com/.

2. Скачайте и разместите где-нибудь конвертированное видео, также как это сделал владелец того сайта.

3. Подставьте в значение src тега source (вложенный в video) ссылку.


Сообщение отредактировал NeLo: 18 Июнь 2016 - 19:16






Темы с аналогичным тегами видео, фон, шаблоны, дизайн-пак, css, стили

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных




Яндекс.Метрика