# HG changeset patch
# User Valentin Bartenev <vbart@nginx.com>
# Date 1540831952 -10800
# Node ID b459b643bf5a82bde0d88214fba3bb897f44a05d
# Parent  4e53813fbe2179c6c74fc01197ee8f692ee6a72a
Added "video" element to include YouTube videos.

diff --git a/dtd/content.dtd b/dtd/content.dtd
--- a/dtd/content.dtd
+++ b/dtd/content.dtd
@@ -11,7 +11,7 @@
 >
 
 <!ELEMENT  para         (#PCDATA | link | links | varlinks | br | list | note |
-                         i | b | nobr | table | literal | command |
+                         i | b | nobr | table | literal | command | video |
                          path | example | header | value | programlisting |
                          initial |
                          mainline_version | stable_version | commercial_version |
@@ -95,6 +95,11 @@
 
 <!ELEMENT  paypal       EMPTY >
 
+<!ELEMENT  video        EMPTY >
+<!ATTLIST  video
+           id           CDATA #IMPLIED
+>
+
 <!ELEMENT  mainline_version    EMPTY >
 <!ELEMENT  stable_version      EMPTY >
 <!ELEMENT  commercial_version  (#PCDATA) >
diff --git a/xsls/content.xsls b/xsls/content.xsls
--- a/xsls/content.xsls
+++ b/xsls/content.xsls
@@ -178,5 +178,12 @@ X:stylesheet {
     X:template = "nobr" { <nobr> !!; </nobr> }
     X:template = "br" { <br/> }
 
-
+    X:template = "video[@id]" {
+        <div class="video">
+        <iframe type="text/html"
+                src="https://www.youtube.com/embed/{@id}?modestbranding=1&amp;rel=0&amp;showinfo=0&amp;color=white"
+                frameborder="0" allowfullscreen="1">
+        </iframe>
+        </div>
+    }
 }
diff --git a/xsls/style.xsls b/xsls/style.xsls
--- a/xsls/style.xsls
+++ b/xsls/style.xsls
@@ -94,6 +94,16 @@ X:template style (lang) {
                             padding:        0;
                             margin:         0; }
         sup               { font-size:      50%; }
+        .video            { position: relative;
+                            padding-bottom: 56.25%;
+                            overflow: hidden; }
+        .video iframe,
+        .video object,
+        .video embed      { position: absolute;
+                            top:0;
+                            left:0;
+                            width:100%;
+                            height:100%; }
         ') }
 
     X:if "$lang = 'he'" {