Как сделать из видеороликов YouTube фон для страниц сайта

Понравилась сама идея. Нашел на jqueryscript.net плагин Tubular. Здесь примеры кода в iframes, экспериментировал с позицией и прозрачностью роликов. Здесь же распчатаны инструкции и файлы плагина.

Tubular is a jQuery plugin that lets you set a YouTube video as your page background. Just attach it to your page wrapper element, set some options, and you're on your way.
Демонстрация YouTube Player API

Вот два копипаста из кода браузера¶

Первый пример - окно браузера развернуто на весь экран, во втором примере окно занимает только часть экрана.

In [3]:

html1="""
<iframe width="1366" height="769" title="YouTube video player" 
id="tubular-player" 
src="http://www.youtube.com/embed/e4Is32W-ppk?
controls=0&amp;
showinfo=0&amp;modestbranding=1&amp;
wmode=transparent&amp;
enablejsapi=1&amp;
origin=http%3A%2F%2Fwww.jqueryscript.net"
frameborder="0" allowfullscreen="1" 
style="left: 0px; top: -55.5px; width: 1354px; height: 762px; position: absolute;"></iframe>
"""

Для окна, которое уменьшил вручную

In [5]:

<iframe width="1366" height="769" title="YouTube video player" id="tubular-player"
src="http://www.youtube.com/embed/e4Is32W-ppk?
controls=0&amp;
showinfo=0&amp;
modestbranding=1&amp;
wmode=transparent&amp;
enablejsapi=1&amp;
origin=http%3A%2F%2Fwww.jqueryscript.net"
frameborder="0" allowfullscreen="1" 
style="left: -89px; top: 0px; width: 966px; height: 543px; position: absolute;"></iframe>

  File "<ipython-input-5-c107f3d9f0ba>", line 2
    <iframe width="1366" height="769" title="YouTube video player" id="tubular-player"
    ^
SyntaxError: invalid syntax

Чтобы понять, как сочетаются пераметры и стили, поэкспериментируем

Загрузим разные варианты фрейма сюда¶

Я уменьшил все размеры в два раза

In [6]:

%%html
<iframe width="683" height="384" title="YouTube video player" 
id="tubular-player" 
src="http://www.youtube.com/embed/e4Is32W-ppk?
controls=0&amp;
showinfo=0&amp;
modestbranding=1&amp;
wmode=transparent&amp;
enablejsapi=1&amp;
origin=http%3A%2F%2Fwww.jqueryscript.net" frameborder="0" allowfullscreen="1" 
style="left: 100px; top: 15.5px; width: 677px; height: 381px; position: absolute;"></iframe>

In [ ]:

In [ ]:

In [ ]:

In [ ]:

In [ ]:

In [ ]:

In [7]:

if1="""
<iframe width="500" height="300" title="YouTube video player" 
id="tubular-player_35" 
src="http://www.youtube.com/embed/e4Is32W-ppk?
controls=0&amp;
showinfo=0&amp;
modestbranding=1&amp;
wmode=transparent&amp;
enablejsapi=1&amp;
origin=http%3A%2F%2Fwww.jqueryscript.net" frameborder="0" allowfullscreen="1" 
style="left: 200px; top: 15.5px; width: 677px; height: 381px; position: absolute;"></iframe>
"""

In [8]:

HTML(if1) 

---------------------------------------------------------------------------
NameError                                 Traceback (most recent call last)
<ipython-input-8-dc9876f28586> in <module>()
----> 1 HTML(if1)

NameError: name 'HTML' is not defined

In [34]:

Image('https://www.nyfa.edu/student-resources/wp-content/uploads/2015/01/pencil-12.jpg')

Out[34]:

In [51]:

jq = "<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> "
HTML(jq)

Out[51]:

In [55]:

%%javascript
element.append($("#tubular-player_35").css("z-index"));
element.append('  ');
element.append($("#tubular-player_35").css("position"));

In [ ]:

In [57]:

%%javascript
element.append($("iframe").css("z-index"));
element.append($(".video-stream").css("z-index"));

In [44]:

IFrame('http://www.jqueryscript.net/demo/jQuery-Plugin-For-Fullscreen-YouTube-Video-Backgrounds-tubular/',500,300) 

Out[44]:

In [ ]:

# %load F:\\IPython Notebooks\\2015_11\\files\\jquery.tubular.1.0.1\\instructions.txt
jQuery tubular is a plugin that places a YouTube video of your choice into your page as a background.


REQUIREMENTS

Usage is straightforward and requires JavaScript on the client's browser to work. 
Tubular is a jQuery plugin and therefore relies on jQuery. 
You will need to know the YouTube ID of the video you want to use as well as the container DIV of your web page.

Please note, tubular must be deployed on a web server to function.  
The YouTube player will not work when loaded into your browser from your machine.


INSTRUCTIONS

1. Load the jQuery core on your page.  Something like 
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
jQuery must appear BEFORE tubular in your HTML document.

2. Load the tubular plugin.  tubular must be called AFTER the jQuery include.
 <script type="text/javascript" charset="utf-8" src="js/jquery.tubular.1.0.js"></script> 

3. Call tubular on your wrapper div, the outermost containing div below the BODY tag.  
This must be performed within your $(document).ready() function.  
Ideally, you will make the call in an external JavaScript file, but you may use it in a SCRIPT block or even inline *gah*.
 $().ready(function() {
  $('#wrapper').tubular({videoId: 'idOfYourVideo'}); // where idOfYourVideo is the YouTube ID.
 });

That's it!  tubular does the rest.

Please note that tubular will change the structure of your CSS.  
Your wrapper DIV will become position: relative and z-index: 99. 
The z-index value is configurable. See the docs for details. 
Two DIVS, tubular-container and tubular-shield will be created at z-index: 1 and 2 respectively 
    with position: fixed for the video and an empty DIV above it to prevent accidental clickthroughs to YouTube.

This plugin was first released on November 21, 2010 and is licensed under the MIT license.  Updated October 1, 2012.

In [ ]:

# %load F://IPython Notebooks/2015_11/files/jquery.tubular.1.0.1/js/index.js
$('document').ready(function() {
 var options = { videoId: 'e4Is32W-ppk', start: 3 };
 $('#wrapper').tubular(options);
 // f-UGhWj1xww cool sepia hd
 // 49SKbS7Xwf4 beautiful barn sepia
});

In [ ]:

# %load F://IPython Notebooks/2015_11/files/jquery.tubular.1.0.1/js/jquery.tubular.1.0.js
/* jQuery tubular plugin
|* by Sean McCambridge
|* http://www.seanmccambridge.com/tubular
|* version: 1.0
|* updated: October 1, 2012
|* since 2010
|* licensed under the MIT License
|* Enjoy.
|* 
|* Thanks,
|* Sean */

;(function ($, window) {

    // test for feature support and return if failure
    
    // defaults
    var defaults = {
        ratio: 16/9, // usually either 4/3 or 16/9 -- tweak as needed
        videoId: 'ZCAnLxRvNNc', // toy robot in space is a good default, no?
        mute: true,
        repeat: true,
        width: $(window).width(),
        wrapperZIndex: 99,
        playButtonClass: 'tubular-play',
        pauseButtonClass: 'tubular-pause',
        muteButtonClass: 'tubular-mute',
        volumeUpClass: 'tubular-volume-up',
        volumeDownClass: 'tubular-volume-down',
        increaseVolumeBy: 10,
        start: 0
    };

    // methods

    var tubular = function(node, options) { // should be called on the wrapper div
        var options = $.extend({}, defaults, options),
            $body = $('body') // cache body node
            $node = $(node); // cache wrapper node

        // build container
        var tubularContainer = '<div id="tubular-container" style="overflow: hidden; position: fixed; z-index: 1; width: 100%; height: 100%"><div id="tubular-player" style="position: absolute"></div></div><div id="tubular-shield" style="width: 100%; height: 100%; z-index: 2; position: absolute; left: 0; top: 0;"></div>';

        // set up css prereq's, inject tubular container and set up wrapper defaults
        $('html,body').css({'width': '100%', 'height': '100%'});
        $body.prepend(tubularContainer);
        $node.css({position: 'relative', 'z-index': options.wrapperZIndex});

        // set up iframe player, use global scope so YT api can talk
        window.player;
        window.onYouTubeIframeAPIReady = function() {
            player = new YT.Player('tubular-player', {
                width: options.width,
                height: Math.ceil(options.width / options.ratio),
                videoId: options.videoId,
                playerVars: {
                    controls: 0,
                    showinfo: 0,
                    modestbranding: 1,
                    wmode: 'transparent'
                },
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }

        window.onPlayerReady = function(e) {
            resize();
            if (options.mute) e.target.mute();
            e.target.seekTo(options.start);
            e.target.playVideo();
        }

        window.onPlayerStateChange = function(state) {
            if (state.data === 0 && options.repeat) { // video ended and repeat option is set true
                player.seekTo(options.start); // restart
            }
        }

        // resize handler updates width, height and offset of player after resize/init
        var resize = function() {
            var width = $(window).width(),
                pWidth, // player width, to be defined
                height = $(window).height(),
                pHeight, // player height, tbd
                $tubularPlayer = $('#tubular-player');

            // when screen aspect ratio differs from video, video must center and underlay one dimension

            if (width / options.ratio < height) { // if new video height < window height (gap underneath)
                pWidth = Math.ceil(height * options.ratio); // get new player width
                $tubularPlayer.width(pWidth).height(height).css({left: (width - pWidth) / 2, top: 0}); // player width is greater, offset left; reset top
            } else { // new video width < window width (gap to right)
                pHeight = Math.ceil(width / options.ratio); // get new player height
                $tubularPlayer.width(width).height(pHeight).css({left: 0, top: (height - pHeight) / 2}); // player height is greater, offset top; reset left
            }

        }

        // events
        $(window).on('resize.tubular', function() {
            resize();
        })

        $('body').on('click','.' + options.playButtonClass, function(e) { // play button
            e.preventDefault();
            player.playVideo();
        }).on('click', '.' + options.pauseButtonClass, function(e) { // pause button
            e.preventDefault();
            player.pauseVideo();
        }).on('click', '.' + options.muteButtonClass, function(e) { // mute button
            e.preventDefault();
            (player.isMuted()) ? player.unMute() : player.mute();
        }).on('click', '.' + options.volumeDownClass, function(e) { // volume down button
            e.preventDefault();
            var currentVolume = player.getVolume();
            if (currentVolume < options.increaseVolumeBy) currentVolume = options.increaseVolumeBy;
            player.setVolume(currentVolume - options.increaseVolumeBy);
        }).on('click', '.' + options.volumeUpClass, function(e) { // volume up button
            e.preventDefault();
            if (player.isMuted()) player.unMute(); // if mute is on, unmute
            var currentVolume = player.getVolume();
            if (currentVolume > 100 - options.increaseVolumeBy) currentVolume = 100 - options.increaseVolumeBy;
            player.setVolume(currentVolume + options.increaseVolumeBy);
        })
    }

    // load yt iframe js api

    var tag = document.createElement('script');
    tag.src = "//www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // create plugin

    $.fn.tubular = function (options) {
        return this.each(function () {
            if (!$.data(this, 'tubular_instantiated')) { // let's only run one
                $.data(this, 'tubular_instantiated', 
                tubular(this, options));
            }
        });
    }

})(jQuery, window);

In [ ]:

# %load F://IPython Notebooks/2015_11/files/jquery.tubular.1.0.1/index.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>tubular, a YouTube Background Player jQuery Plugin | Sean McCambridge Design</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="icon" type="image/png" href="/media/layout/favicon.png" />

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

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
 <script type="text/javascript" charset="utf-8" src="js/jquery.tubular.1.0.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/index.js"></script>

</head>
<body>
<div id="wrapper" class="clearfix">
 <div id="main">
  <a href="http://www.seanmccambridge.com/tubular/"><img src="media/logo.png" alt="Tubular logo" id="logo" /></a>
  <p id="video-controls" class="black-65">Video controls:<br /><a href="#" class="tubular-play">Play</a> | <a href="#" class="tubular-pause">Pause</a> | <a href="#" class="tubular-volume-up">Volume Up</a> | <a href="#" class="tubular-volume-down">Volume Down</a> | <a href="#" class="tubular-mute">Mute</a></p>
  <div class="black-50">
   <h1>jQuery tubular</h1>
   <p>Tubular is a jQuery plugin that lets you set a YouTube video as your page background.  Just attach it to your page wrapper element, set some options, and you're on your way.</p>
   <p><code>$(<em>page content wrapper element</em>).tubular(<em>options</em>);</code></p>
  </div>
  <div class="black-50">
   <h2>Tubular's <em>hello, world</em></h2>
   <p>Assuming you're happy with the default options and you use a wrapper div with the id of <em>wrapper</em>, you simply attach to your wrapper div and specify the video you want to load:</p>
   <p><code>$('#wrapper').tubular({videoId: '0Bmhjf0rKe8'});</code></p>
   <p>and <em>Presto!</em> ... kittens in your website background!</p>
  </div>
  <div class="black-50">
   <h2>A word of caution</h2>
   <p>Tubular does not design your website for you. It works here thanks to alpha transparency on these gray boxes and the png logo on the top left. I built tubular thinking it would help experienced web designers and developers add some subtle background elements &mdash; emphasis on subtle &mdash; to their work. I'm sure there are some tasteful ways to use tubular and many, many more not so tasteful ways to use it. With great power comes great responsibility. The kitten example above is not to be taken seriously! :-)</p>
  </div>
  <div class="black-50">
   <h2>Options and defaults</h2>
   <code>
    <ul>
     <li>ratio: 16/9 // usually either 4/3 or 16/9 -- tweak as needed</li>
           <li>videoId: 'ZCAnLxRvNNc' // toy robot in space is a good default, no?</li>
           <li>mute: true</li>
           <li>repeat: true</li>
           <li>width: $(window).width() // no need to override</li>
           <li>wrapperZIndex: 99</li>
           <li>playButtonClass: 'tubular-play'</li>
           <li>pauseButtonClass: 'tubular-pause'</li>
           <li>muteButtonClass: 'tubular-mute'</li>
           <li>volumeUpClass: 'tubular-volume-up'</li>
           <li>volumeDownClass: 'tubular-volume-down'</li>
           <li>increaseVolumeBy: 10 // increment value; volume range is 1-100</li>
           <li>start: 0 // starting position in seconds</li>
          </ul>
         </code>
  </div>
 </div>
 <div id="sidebar">
  <div class="black-50">
   <h2>Download</h2>
   <p><a href="http://code.google.com/p/jquery-tubular/">Download jQuery tubular on Google Code</a></p>
  </div>
  <div class="black-50">
   <h2>Credits</h2>
   <p>Beautiful time lapse video of the U.S. Southwest by Tom Lowe and Catherine Laplace-Builhe. <a href="http://www.youtube.com/watch?v=e4Is32W-ppk">Original video here</a>. Code by <a href="http://seanmccambridge.com">Sean McCambridge</a>. Released under <a href="http://opensource.org/licenses/mit-license.php">the MIT License</a>.</p>
  </div>
  <div class="black-50">
   <h2>Remember</h2>
   <p>Tubular does one thing well. It takes a single video from YouTube at injects it as a full-screen background on a website. It scales the video, offsets the video and provides some basic controls for the video.  That's it.</p>
   <p>Tubular makes some assumptions on how your website works. First, it assumes you have a single wrapper element under the body tag that envelops all of your website content. It promotes that wrapper to z-index: 99 and position: relative. You can configure the z-index value in the options. So it's assuming your wrapper can accept positioning without breaking your site.</p>
   <p>Finally, tubular injects the YouTube video you specified as an iframe using fixed position at z-index: 1.  Browsers that do not support fixed positioning will not support tubular. Also, since the YouTube iframe API requires the HTML5 postMessage feature, browsers that do not support it (I'm looking at you, IE7) will not support tubular &mdash; tubular will return false before any changes are made to your CSS in IE7.</p>
  </div>
 </div>
</div><!-- #wrapper -->
</body>
</html>

А это фрагмент html код этой страницы после встав и видеофрейма командой HTML(if1) в ячейке In[41]¶

In [ ]:

<div tabindex="-1" class="html5-video-player unstarted-mode ytp-hide-controls ytp-hide-info-bar" id="player_uid_926297536_1" aria-label="Проигрыватель YouTube" data-version="//s.ytimg.com/yts/jsbin/player-ru_RU-vflzE3CAr/base.js">
 <div class="html5-video-container" data-layer="0">
  <video class="video-stream html5-main-video" style="left: 0px; top: -1149px; width: 677px; height: 381px; transform: none;"/>
 </div>
 <div class="html5-video-content" style="left: 0px; top: 0px; width: 677px; height: 381px;" data-layer="0"/>
 <div class="ytp-gradient-top" data-layer="1"/>
 <div class="ytp-chrome-top ytp-watch-later-button-visible ytp-share-button-visible" data-layer="1">
  <button tabindex="0" class="ytp-playlist-menu-button ytp-button" aria-haspopup="true" aria-owns="ytp_playlist_menu" style="display: none;" aria-label="Плейлист">
   <div class="ytp-playlist-menu-button-icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" width="100%" height="100%" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
     <defs>
      <path id="ytp-svg-36" d="M 9 11 L 27 11 L 27 14 L 9 14 L 9 11 Z M 9 16 L 27 16 L 27 19 L 9 19 L 9 16 Z M 9 21 L 21 21 L 21 24 L 9 24 L 9 21 Z M 26 22.5 L 22 25 L 22 20 L 26 22.5 Z" />
     </defs>
     <use class="ytp-svg-shadow" xlink:href="#ytp-svg-36" />
     <use class="ytp-svg-fill" xlink:href="#ytp-svg-36" />
    </svg>
   </div>
   <div class="ytp-playlist-menu-button-text"/>
  </button>
  <div class="ytp-title">
   <a tabindex="0" class="ytp-title-channel-logo" target="_blank"/>
   <div class="ytp-title-text">
    <a tabindex="0" class="ytp-title-link yt-uix-sessionlink" href="http://www.youtube.com/watch?v=e4Is32W-ppk" target="_blank" data-sessionlink="feature=player-title">American Southwest Landscape -Time-Lapse HD 1080p</a><a tabindex="0" class="ytp-title-channel-name" target="_blank"/>
   </div>
  </div>
  <div class="ytp-chrome-top-buttons">
   <button tabindex="0" title="Похожие видео" class="ytp-button ytp-related-menu-button" aria-haspopup="true" aria-owns="ytp-related-menu">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" width="100%" height="100%" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
     <defs>
      <path id="ytp-svg-38" d="M 10 10 L 17 10 L 17 17 L 10 17 L 10 10 Z M 19 10 L 26 10 L 26 17 L 19 17 L 19 10 Z M 10 19 L 17 19 L 17 26 L 10 26 L 10 19 Z M 19 19 L 26 19 L 26 26 L 19 26 L 19 19 Z" />
     </defs>
     <use class="ytp-svg-shadow" xlink:href="#ytp-svg-38" />
     <use class="ytp-svg-fill" xlink:href="#ytp-svg-38" />
    </svg>
   </button>
   <button tabindex="0" title="Посмотреть позже" class="ytp-watch-later-button ytp-button">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" width="100%" height="100%" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
     <defs>
      <path id="ytp-svg-52" d="M 18 8 C 12.47 8 8 12.47 8 18 C 8 23.52 12.47 28 18 28 C 23.52 28 28 23.52 28 18 C 28 12.47 23.52 8 18 8 L 18 8 Z M 16 19.02 L 16 12 L 18 12 L 18 17.86 L 23.1 20.81 L 22.1 22.54 L 16 19.02 Z" />
     </defs>
     <use class="ytp-svg-shadow" xlink:href="#ytp-svg-52" />
     <use class="ytp-svg-fill" xlink:href="#ytp-svg-52" />
    </svg>
   </button>
   <button tabindex="0" title="Поделиться" class="ytp-button ytp-share-button" aria-haspopup="true" aria-owns="ytp-share-panel">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" width="100%" height="100%" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
     <defs>
      <path id="ytp-svg-41" d="M 21.54 22.88 L 15.55 19.39 C 15.67 19.04 15.74 18.68 15.74 18.29 C 15.74 18.03 15.71 17.78 15.66 17.54 L 21.54 14.11 C 22.11 14.57 22.83 14.86 23.62 14.86 C 25.49 14.86 27 13.32 27 11.43 C 27 9.53 25.49 8 23.62 8 C 21.75 8 20.25 9.53 20.25 11.43 C 20.25 11.69 20.28 11.94 20.33 12.18 L 14.45 15.61 C 13.87 15.15 13.16 14.86 12.37 14.86 C 10.5 14.86 9 16.4 9 18.29 C 9 20.19 10.5 21.73 12.37 21.73 C 13.02 21.73 13.62 21.53 14.14 21.2 L 20.33 24.81 C 20.28 25.05 20.25 25.3 20.25 25.56 C 20.25 27.46 21.75 29 23.62 29 C 25.49 29 27 27.46 27 25.56 C 27 23.67 25.49 22.13 23.62 22.13 C 22.83 22.13 22.12 22.41 21.54 22.88 L 21.54 22.88 Z" />
     </defs>
     <use class="ytp-svg-shadow" xlink:href="#ytp-svg-41" />
     <use class="ytp-svg-fill" xlink:href="#ytp-svg-41" />
    </svg>
   </button>
  </div>
 </div>
 <button tabindex="0" title="Подробнее..." class="ytp-button ytp-cards-button" aria-haspopup="true" aria-owns="ytp-cards" style="display: none;" aria-label="Показать подсказки" data-layer="2">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" width="100%" height="100%" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
    <path id="ytp-svg-21" d="M 18 8 C 12.47 8 8 12.47 8 18 C 8 23.52 12.47 28 18 28 C 23.52 28 28 23.52 28 18 C 28 12.47 23.52 8 18 8 L 18 8 Z M 17 16 L 19 16 L 19 24 L 17 24 L 17 16 Z M 17 12 L 19 12 L 19 14 L 17 14 L 17 12 Z" />
   </defs>
   <use class="ytp-svg-shadow" xlink:href="#ytp-svg-21" />
   <use class="ytp-svg-fill" xlink:href="#ytp-svg-21" />
  </svg>
 </button>
 <div tabindex="0" class="ytp-webgl-spherical-control" style="display: none;" aria-label="Стрелки для управления обзором в панорамных видео." data-layer="3">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="100%" height="100%" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
    <circle id="ytp-svg-43" cx="25" cy="25" r="24" />
    <path id="ytp-svg-44" d="M 11.46 29.41 L 9.97 30.9 L 4 24.95 L 9.97 19 L 11.46 20.48 L 7 24.95 L 11.46 29.41 M 42.46 24.95 L 38 20.48 L 39.48 19 L 45.46 24.95 L 39.48 30.9 L 38 29.41 L 42.46 24.95 M 24.5 42.43 L 28.96 37.96 L 30.45 39.45 L 24.5 45.43 L 18.54 39.45 L 20.03 37.96 L 24.5 42.43 M 24.5 6.97 L 20.03 11.43 L 18.54 9.94 L 24.5 3.96 L 30.45 9.94 L 28.96 11.43 L 24.5 6.97 Z" />
   </defs>
   <use opacity="0.15" stroke="#000" stroke-width="2" xlink:href="#ytp-svg-43" />
   <use fill="#fff" xlink:href="#ytp-svg-43" />
   <use opacity="0.15" stroke="#000" stroke-width="1" xlink:href="#ytp-svg-44" />
   <use fill="#999" xlink:href="#ytp-svg-44" />
  </svg>
 </div>
 <div class="ytp-thumbnail-overlay ytp-cued-thumbnail-overlay" style='background-image: url("http://i.ytimg.com/vi/e4Is32W-ppk/sddefault.jpg");' data-layer="4">
  <button tabindex="0" class="ytp-large-play-button ytp-button" aria-label="Посмотреть American Southwest Landscape -Time-Lapse HD 1080p">
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48" width="100%" height="100%" version="1.1">
    <path class="ytp-large-play-button-bg" fill="#1f1f1e" fill-opacity="0.81" d="m 0.66 37.62 c 0 0 0.66 4.7 2.7 6.77 c 2.58 2.71 5.98 2.63 7.49 2.91 c 5.43 0.52 23.1 0.68 23.12 0.68 c 0 -1.3e-005 14.29 -0.02 23.81 -0.71 c 1.32 -0.15 4.22 -0.17 6.81 -2.89 c 2.03 -2.07 2.7 -6.77 2.7 -6.77 c 0 0 0.67 -5.52 0.67 -11.04 l 0 -5.17 c 0 -5.52 -0.67 -11.04 -0.67 -11.04 c 0 0 -0.66 -4.7 -2.7 -6.77 C 62.03 0.86 59.13 0.84 57.8 0.69 C 48.28 0 34 0 34 0 C 33.97 0 19.69 0 10.18 0.69 C 8.85 0.84 5.95 0.86 3.36 3.58 C 1.32 5.65 0.66 10.35 0.66 10.35 c 0 0 -0.55 4.5 -0.66 9.45 l 0 8.36 c 0.1 4.94 0.66 9.45 0.66 9.45 Z" />
    <path fill="#fff" d="m 26.96 13.67 l 18.37 9.62 l -18.37 9.55 l 0 -19.17 Z" />
    <path fill="#ccc" d="M 45.02 23.46 L 45.32 23.28 L 26.96 13.67 L 43.32 24.34 L 45.02 23.46 Z" />
   </svg>
  </button>
 </div>
 <div class="ytp-spinner" style="display: none;" data-layer="4">
  <span class="ytp-spinner-svg">
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" width="100%" height="100%" version="1.1">
    <svg x="7" y="1">
     <circle class="ytp-spinner-dot ytp-spinner-dot-0" cx="4" cy="4" r="2" />
    </svg>
    <svg x="11" y="3">
     <circle class="ytp-spinner-dot ytp-spinner-dot-1" cx="4" cy="4" r="2" />
    </svg>
    <svg x="13" y="7">
     <circle class="ytp-spinner-dot ytp-spinner-dot-2" cx="4" cy="4" r="2" />
    </svg>
    <svg x="11" y="11">
     <circle class="ytp-spinner-dot ytp-spinner-dot-3" cx="4" cy="4" r="2" />
    </svg>
    <svg x="7" y="13">
     <circle class="ytp-spinner-dot ytp-spinner-dot-4" cx="4" cy="4" r="2" />
    </svg>
    <svg x="3" y="11">
     <circle class="ytp-spinner-dot ytp-spinner-dot-5" cx="4" cy="4" r="2" />
    </svg>
    <svg x="1" y="7">
     <circle class="ytp-spinner-dot ytp-spinner-dot-6" cx="4" cy="4" r="2" />
    </svg>
    <svg x="3" y="3">
     <circle class="ytp-spinner-dot ytp-spinner-dot-7" cx="4" cy="4" r="2" />
    </svg>
   </svg>
  </span>
  <div class="ytp-spinner-message" style="display: none;">Подождите немного. Если воспроизведение так и не начнется, перезагрузите устройство.</div>
 </div>
 <div class="ytp-bezel" role="status" aria-hidden="true" style="display: none;" data-layer="4">
  <div class="ytp-bezel-icon"/>
 </div>
 <div aria-hidden="true" style="display: none;" data-layer="4">
  <div class="ytp-tooltip-bg">
   <div class="ytp-tooltip-duration"/>
  </div>
  <div class="ytp-tooltip-text-wrapper">
   <div class="ytp-tooltip-image"/>
   <div class="ytp-tooltip-title"/>
   <span class="ytp-tooltip-text"/>
  </div>
 </div>
 <div class="ytp-mini-progress-bar-container" style="display: none;" data-layer="4">
  <div class="ytp-mini-progress-bar ytp-swatch-background-color"/>
 </div>
 <div class="ytp-cards-teaser" aria-hidden="true" style="display: none;" data-layer="5">
  <div class="ytp-cards-teaser-box"/>
  <div class="ytp-cards-teaser-text"/>
 </div>
 <div class="ytp-playlist-menu" role="dialog" aria-hidden="true" style="display: none;" data-layer="5">
  <div class="ytp-playlist-menu-header">
   <div class="ytp-playlist-menu-title">
    <a tabindex="0" class="ytp-playlist-menu-title-name"/>
    <button tabindex="0" class="ytp-playlist-menu-close ytp-button" aria-label="Закрыть">
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="100%" height="100%">
      <path fill="#fff" d="M 19 6.41 L 17.59 5 L 12 10.59 L 6.41 5 L 5 6.41 L 10.59 12 L 5 17.59 L 6.41 19 L 12 13.41 L 17.59 19 L 19 17.59 L 13.41 12 Z" />
     </svg>
    </button>
   </div>
   <div class="ytp-playlist-menu-subtitle"/>
  </div>
  <div class="ytp-playlist-menu-items" role="menu"/>
 </div>
 <div class="ytp-related-menu" role="dialog" aria-hidden="true" style="display: none;" data-layer="5">
  <div class="ytp-related-menu-header">
   <button tabindex="0" class="ytp-related-menu-close ytp-button" aria-label="Закрыть">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="100%" height="100%">
     <path fill="#fff" d="M 19 6.41 L 17.59 5 L 12 10.59 L 6.41 5 L 5 6.41 L 10.59 12 L 5 17.59 L 6.41 19 L 12 13.41 L 17.59 19 L 19 17.59 L 13.41 12 Z" />
    </svg>
   </button>
   <div class="ytp-related-menu-title">Похожие видео</div>
  </div>
  <div class="ytp-related-menu-items" role="menu"/>
 </div>
 <div class="ytp-share-panel" id="ytp-share-panel" role="dialog" aria-hidden="true" aria-labelledby="ytp-share-panel-title" style="display: none;" data-layer="5">
  <button tabindex="0" title="Закрыть" class="ytp-share-panel-close ytp-button">
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="100%" height="100%">
    <path fill="#fff" d="M 19 6.41 L 17.59 5 L 12 10.59 L 6.41 5 L 5 6.41 L 10.59 12 L 5 17.59 L 6.41 19 L 12 13.41 L 17.59 19 L 19 17.59 L 13.41 12 Z" />
   </svg>
  </button>
  <div class="ytp-share-panel-inner-content">
   <div class="ytp-share-panel-title" id="ytp-share-panel-title">Поделиться</div><a tabindex="0" title="Поделиться ссылкой" class="ytp-share-panel-link ytp-no-contextmenu" aria-label="Поделиться ссылкой" target="_blank"/>
   <label class="ytp-share-panel-include-playlist">
    <input tabindex="0" class="ytp-share-panel-include-playlist-checkbox" type="checkbox" checked="true">В составе плейлиста</label>
    <div class="ytp-share-panel-loading-spinner">
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" width="100%" height="100%" version="1.1">
      <svg x="7" y="1">
       <circle class="ytp-spinner-dot ytp-spinner-dot-0" cx="4" cy="4" r="2" />
      </svg>
      <svg x="11" y="3">
       <circle class="ytp-spinner-dot ytp-spinner-dot-1" cx="4" cy="4" r="2" />
      </svg>
      <svg x="13" y="7">
       <circle class="ytp-spinner-dot ytp-spinner-dot-2" cx="4" cy="4" r="2" />
      </svg>
      <svg x="11" y="11">
       <circle class="ytp-spinner-dot ytp-spinner-dot-3" cx="4" cy="4" r="2" />
      </svg>
      <svg x="7" y="13">
       <circle class="ytp-spinner-dot ytp-spinner-dot-4" cx="4" cy="4" r="2" />
      </svg>
      <svg x="3" y="11">
       <circle class="ytp-spinner-dot ytp-spinner-dot-5" cx="4" cy="4" r="2" />
      </svg>
      <svg x="1" y="7">
       <circle class="ytp-spinner-dot ytp-spinner-dot-6" cx="4" cy="4" r="2" />
      </svg>
      <svg x="3" y="3">
       <circle class="ytp-spinner-dot ytp-spinner-dot-7" cx="4" cy="4" r="2" />
      </svg>
     </svg>
    </div>
    <div class="ytp-share-panel-service-buttons"/>
    <div class="ytp-share-panel-error">Ошибка. Повторите попытку позже.</div>
   </div>
  </div><a tabindex="0" class="ytp-watermark yt-uix-sessionlink" aria-label="Смотреть это видео на&nbsp;www.youtube.com" href="http://www.youtube.com/watch?v=e4Is32W-ppk" target="_blank" data-sessionlink="feature=player-watermark" data-layer="7">
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 77 34" width="100%" height="100%" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
     <path id="ytp-svg-24" d="m 26.81 26.92 l 0 -1.67 c -1.06 1.25 -1.96 1.89 -2.94 1.89 c -0.86 0 -1.46 -0.41 -1.76 -1.17 c -0.18 -0.46 -0.31 -1.18 -0.31 -2.23 l 0 -12.18 l 2.8 0 l 0 12.48 c 0.06 0.42 0.24 0.58 0.59 0.58 c 0.53 0 1.02 -0.48 1.61 -1.34 l 0 -11.72 l 2.8 0 l 0 15.38 l -2.8 0 l 0 0 Z M 18.83 12.91 c -0.74 -1.05 -1.91 -1.48 -3.1 -1.48 c -1.33 0 -2.35 0.43 -3.1 1.48 c -0.57 0.77 -0.88 2.02 -0.88 3.66 l 0 5.46 c 0 1.63 0.27 2.76 0.84 3.53 c 0.74 1.04 1.95 1.6 3.13 1.6 c 1.18 0 2.41 -0.55 3.16 -1.6 c 0.56 -0.76 0.82 -1.89 0.82 -3.53 l 0 -5.48 c 0 -1.64 -0.32 -2.87 -0.88 -3.65 l 0 0 l 0 0 Z m -1.91 9.44 c 0.14 1.52 -0.31 2.27 -1.18 2.27 c -0.87 0 -1.32 -0.75 -1.18 -2.27 l 0 -6.09 c -0.14 -1.52 0.31 -2.23 1.18 -2.23 c 0.87 0 1.33 0.71 1.18 2.23 l 0 6.09 l 0 0 Z m -8.27 4.56 l -2.95 0 l 0 -8.37 c 0 0 -3.06 -10.27 -3.69 -12.18 l 3.1 0 l 2.07 8.02 l 2.06 -8.02 l 3.1 0 l -3.69 12.18 l 0 8.37 l 0 0 Z" />
     <path id="ytp-svg-25" d="M 73.8 3.53 C 72.12 1.72 70.24 1.72 69.38 1.61 C 63.21 1.15 53.95 1.15 53.95 1.15 c -0.01 0 -9.27 0 -15.44 0.45 c -0.86 0.1 -2.74 0.11 -4.41 1.91 c -1.32 1.37 -1.75 4.49 -1.75 4.49 c 0 0 -0.44 3.66 -0.44 7.32 l 0 3.43 c 0 3.66 0.44 7.32 0.44 7.32 c 0 0 0.43 3.11 1.75 4.49 c 1.67 1.8 3.88 1.74 4.86 1.93 C 42.48 32.89 53.94 33 53.94 33 c 0 0 9.26 -0.01 15.43 -0.47 c 0.86 -0.1 2.74 -0.11 4.41 -1.91 c 1.32 -1.37 1.75 -4.49 1.75 -4.49 c 0 0 0.44 -3.66 0.44 -7.32 l 0 -3.43 c 0 -3.66 -0.44 -7.32 -0.44 -7.32 c 0 0 -0.43 -3.11 -1.75 -4.49 l 0 0 l 0 0 Z m -35.17 23.39 l 0 -17.51 l -3.1 0 l 0 -2.89 l 9.3 0 l 0 2.89 l -3.24 0 l 0 17.51 l -2.95 0 l 0 0 Z m 10.78 0 l 0 -1.67 c -1.06 1.25 -1.96 1.89 -2.94 1.89 c -0.86 0 -1.46 -0.41 -1.76 -1.17 c -0.18 -0.46 -0.31 -1.18 -0.31 -2.23 l 0 -12.03 l 2.8 0 l 0 12.33 c 0.06 0.42 0.24 0.58 0.59 0.58 c 0.53 0 1.02 -0.48 1.61 -1.34 l 0 -11.57 l 2.8 0 l 0 15.23 l -2.8 0 l 0 0 Z m 12.7 -1.52 c -0.35 1.13 -1.13 1.71 -2.19 1.71 c -0.95 0 -2.01 -0.58 -2.9 -1.72 l 0 1.53 l -3.02 0 l 0 -20.4 l 3.02 0 l 0 6.65 c 0.86 -1.09 1.92 -1.71 2.91 -1.71 c 1.06 0 1.78 0.63 2.13 1.77 c 0.17 0.61 0.35 1.59 0.35 3.03 l 0 6.09 c 0 1.4 -0.11 2.4 -0.29 3.04 l 0 0 l 0 0 Z m 7.36 -1.89 c 0.02 -0.15 0.02 -0.8 0.02 -1.91 l 2.8 0 l 0 0.43 c 0 0.88 -0.07 1.51 -0.09 1.79 c -0.09 0.61 -0.3 1.16 -0.62 1.65 c -0.73 1.1 -1.83 1.64 -3.23 1.64 c -1.39 0 -2.46 -0.51 -3.23 -1.55 c -0.56 -0.76 -0.93 -1.89 -0.93 -3.51 l 0 -5.33 c 0 -1.62 0.33 -2.88 0.89 -3.65 c 0.77 -1.04 1.83 -1.59 3.2 -1.59 c 1.34 0 2.4 0.55 3.15 1.59 c 0.55 0.76 0.86 1.95 0.86 3.58 l 0.001 3.11 l -5.32 0 l 0 2.73 c 0 1.4 0.37 2.11 1.29 2.11 c 0.65 0 1.04 -0.36 1.19 -1.1 l 0 0 l 0 0 Z m -1.21 -9.51 c -0.89 0 -1.27 0.38 -1.27 1.81 l 0 1.68 l 2.51 0 l 0 -1.66 c 0 -1.4 -0.35 -1.83 -1.23 -1.83 l 0 0 l 0 0 Z m -11.16 0.69 l 0 9.23 c 0.44 0.46 0.95 0.69 1.39 0.69 c 0.77 0 1.11 -0.58 1.11 -2.1 l 0 -6.54 c 0 -1.52 -0.34 -1.97 -1.11 -1.97 c -0.44 0 -0.94 0.23 -1.39 0.69 l 0 0 l 0 0 Z" />
     <path id="ytp-svg-26" d="m 34 5.07 l 40 0 l 0 24 l -40 0 Z" />
    </defs>
    <use class="ytp-svg-shadow" xlink:href="#ytp-svg-24" />
    <use class="ytp-svg-shadow" xlink:href="#ytp-svg-25" />
    <use class="ytp-svg-fill" xlink:href="#ytp-svg-24" />
    <use class="ytp-svg-fill ytp-svg-fill-logo-tube-text" fill="none" xlink:href="#ytp-svg-26" />
    <use class="ytp-svg-fill ytp-svg-fill-logo-tube-lozenge" fill="#fff" xlink:href="#ytp-svg-25" />
   </svg>
  </a>
 </div>

Посты чуть ниже также могут вас заинтересовать