Home/ Questions/Q 6537545
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T10:37:46+00:00

I’ve created some markup/css and JavaScript for a custom UI to be used with

  • 0

I’ve created some markup/css and JavaScript for a custom UI to be used with the HTML5 <video> tag and would like to use XSLT to replace the video elements in my web pages with it.

Here is an example XHTML document that would be transformed:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="layout.css" type="text/css"?>
<?xml-stylesheet href="video_extension.xsl" type="text/xsl"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Example</title>
  </head>
  <body>
    <video src="myvideo.webm"/>
  </body>
</html>

video_extension.xsl is the XSLT document I’m trying to create, and it’s output should hopefully be this:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="layout.css" type="text/css"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Example</title>
    <script src="video_extension.js" type="text/javascript"/>
    <link rel="stylesheet" href="video_extension.css" type="text/css"/>
  </head>
  <body>
    <div class="video-container">
      <video src="myvideo.webm"/>
      <div class="video-ui>
        <!-- additional markup not included -->
      </div>
    </div>
  </body>
</html>

It should leave the rest of the document as is, but add the video extension’s CSS and JavaScript files and then wrap the video elements in a div along with the rest of my UI markup. This needs to work for any valid XHTML5 document and the output should also be valid XHTML5.

Thanks for any help.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can use the identity rule and override the wanted elements. For example, the following transform:

    <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:x="http://www.w3.org/1999/xhtml">
    <xsl:output indent="yes"/>
    <xsl:strip-space elements="*"/>

    <xsl:template match="node()|@*">
        <xsl:copy>
            <xsl:apply-templates select="node()|@*"/>
        </xsl:copy>
    </xsl:template>

    <xsl:template match="x:head">
        <xsl:copy>
            <xsl:apply-templates select="@*|node()"/>
            <script src="video_extension.js" type="text/javascript" 
                xmlns="http://www.w3.org/1999/xhtml"/>
            <link rel="stylesheet" href="video_extension.css" type="text/css" 
                xmlns="http://www.w3.org/1999/xhtml"/>
        </xsl:copy>
    </xsl:template>

    <xsl:template match="x:video">
        <div class="video-container" 
            xmlns="http://www.w3.org/1999/xhtml">
            <xsl:copy-of select="."/>
            <div class="video-ui">
                <!-- additional markup not removed -->
            </div>
        </div>
    </xsl:template>

</xsl:stylesheet>

    outputs:

    <?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="layout.css" type="text/css"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
   <head>
      <title>Example</title>
      <script src="video_extension.js" type="text/javascript"/>
      <link rel="stylesheet" href="video_extension.css" type="text/css"/>
   </head>
   <body>
      <div class="video-container">
         <video src="myvideo.webm"/>
         <div class="video-ui"/>
      </div>
   </body>
</html>
    • 0