Категории

Последние добавления

Архив

Поиск по сайту

Статистика

 

Видео на сайте

Хочешь выставить у себя на сайте видео в стильном плейере? Нет ничего проще! Приступим...

Скачаем пакет colorbox от colorpowered.com
в хедер (темплейта) сайта пропишем следующие ссылки:

<link rel="stylesheet" href="../template/css/colorbox.css" type="text/css" media="screen" >
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.colorbox-min.js"></script>

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

И непосредственно в том месте, гда нам это нужно выводим непсредственно видео:

<script type="text/javascript">
        $(document).ready(function(){
            $(".vid").colorbox({iframe:true, innerWidth:580, innerHeight:490});
           
        });
    </script>
    <p>
    <a class="vid" href="http://www.youtube.com/embed/9QeEVem93VU?rel=0" title="Посмотрите интересное кино">
    <img style="border:none" src="/images/image.jpg" alt="Darau Video"><br>
    ИНТЕРЕСНОЕ КИНО
    </a>
    </p>

Что нам здесь важно? (выделено красным)

580, 490 - размеры видео
http://www.youtube.com/embed/9QeEVem93VU - ссылка на видео, например с Ютьюба
Посмотрите интересное кино - Титул, будет показываться при просмотре фильма
/images/image.jpg - если ссылка будет изображением  - то его адрес,
Darau Video - альт (альтернативный текст для картинки) - это надо для валидной верстки.

Ну вот и все, видео добавлено, приятного просмотра!

 
Layout & Building: DARAU