Highslide JS. Открытие и просмотр видеоролика во всплывающем окне.

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

HTML-код видеоролика во всплывающем окне:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highslide JS</title>

<link rel="stylesheet" type="text/css" href="highslide/highslide.css">

<script type="text/javascript" src="highslide/highslide-with-html.js"></script>
<script type="text/javascript">
      // Apply the Highslide settings
      hs.graphicsDir = 'highslide/graphics/';
      hs.outlineType = 'rounded-white';
      hs.outlineWhileAnimating = true;
</script>
</head>
<body>
<a href="//www.youtube.com/embed/ZthNYozVwNM?rel=0&wmode=transparent"
onclick="return hs.htmlExpand(this, {objectType: 'iframe', width: 480, height: 385, 
     allowSizeReduction: false, wrapperClassName: 'draggable-header no-footer',
     preserveContent: false, objectLoadTime: 'after'})"
     class="highslide">
    Посмотрите этот видеоролик
</a>
</body>
</html>

Пропись стилей. (Стили писать обязательно в head).

Подключение скриптов (можно располагать, как в head, так и в body).

Ссылка на видеоролик, выделенная из кода ролика. Последних в СЕТИ великое множество.

В таблице снизу приведен пример кода ролика с сервиса //www.youtube.com и маркером отмечена ссылка, которую нужно копировать и вставлять в код, который мы используем для реализации эффекта.


<iframe title="YouTube video player" width="480" height="390" src="//www.youtube.com/embed/ZthNYozVwNM" frameborder="0" allowfullscreen></iframe>

Исходники (268 кб)

Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master.

Получите и распакуйте архив в отдельную папку. В этой папке, соответственно, находится папка highslide, а также файл demo.html. Откройте последний в браузере и проверьте в начале работу эффекта на компьютере, кликнув ссылку «посмотрите этот видеоролик». Если всё работает - закачайте папку highslide в «корень» сайта, а код из файла demo.html разместите на вашей web-странице, соблюдая вышеописанные правила.

Примечание: Папка highslide является универсальной для всех эффектов Highslide JS, поэтому её стоит закачать один раз на свой сайт. Не беспокойтесь, много места она не занимает, всего-то 887кб.

Успехов! До новых встреч на уроках! Ваш Л.М.

Ваше мнение по материалу, изложенному на сайте

Служба поддержки