title: SVG with HTML5 video text fill
body: <p>So I have been trying to create and SVG Text Logo that displays an "embedded" mpg4 in the letters. At first I used Adobe Illustrator and created and SVG of my logo, while this gave me a great 100% width responsive logo on my page, I could not include a video element in the SVG in any way.</p>
  
  <p>So now I got a Didot web font and am just using a text SVG, I copied and pasted code from F12 tools from this demo: <a href="http://tympanus.net/Tutorials/AnimatedTextFills/index22.html" rel="nofollow noreferrer">http://tympanus.net/Tutorials/AnimatedTextFills/index22.html</a></p>
  
  <p>What I am trying to do now is figure out how to make this logo larger and 100% width responsive to screen width changes.</p>
  
  <p>When I edit <code>font:</code> of the CSS class <code>.wrap</code> I can get larger text but there is a fixed width on the SVG itself that cuts off the text on large screen devices and I cannot figure out. I don't think it relates to the video natural width and height.</p>
  
  <p>What happens is when I change my browser to a large desktop size, the right size of my text is cut off:
  <a href="https://i.stack.imgur.com/cPx9p.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cPx9p.png" alt="enter image description here"></a></p>
  
  <p>I am been changing the values of the SVG <code>viewbox</code> attribute but I cannot seem to conceptualize the nature of the <code>viewbox</code> <code>width=600</code> and <code>height=300</code>, especially with the fact that there is a nest SVG within the parent SVG.</p>
  
  <p>Even after reading this article: <a href="http://tutorials.jenkov.com/svg/svg-viewport-view-box.html#viewbox" rel="nofollow noreferrer">http://tutorials.jenkov.com/svg/svg-viewport-view-box.html#viewbox</a>, I am still having trouble grasping if the <code>viewbox</code> values are playing a role in my issue.</p>
  
  <p>I actually don't think I need to change the values in the <code>viewbox</code> attributes of the two <code>SVG</code> elements. Perhaps it is the em calculations that is causing issues in relation to the <code>SVG</code> <code>text</code> element calculations:</p>
  
  <pre><code> &lt;text text-anchor="middle" x="50%" y="50%" dy=".35em" class="text"&gt;
                          Couture Book
                      &lt;/text&gt;
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.mask__shape
      {
          fill: white;
      }
  
     
      .content
      {
          padding: 0 1em;
          text-align: center;
          width: 100%;
      }
  
      .wrap
      {
          width: 100%;
          position: relative;
          font: 700 2.5em/1 'Dido';
          text-transform: uppercase;
          margin: 0 auto;
          text-align: left;
          overflow: hidden;
          padding: 80px 0;
          -webkit-transform: translate3d(0,0,0);
      }
  
      .box-with-text
      {
          position: absolute;
          top: 50%;
          width: 100%;
          padding-top: 50%;
          -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
      }
  
      .text-fill
      {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          margin: auto;
          overflow: hidden;
      }
  
      svg:not(:root)
      {
          overflow: hidden;
      }
  
      .svg-defs
      {
          width: 0;
          height: 0;
      }
  
      .svg-inverted-mask
      {
          position: absolute;
          top: 0;
      }
  
      .shape--fill
      {
          fill: #fff;
      }
  
      .text--transparent
      {
          fill: transparent;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="content"&gt;
          &lt;div class="wrap"&gt;
              &lt;svg viewBox="0 0 600 300" class="svg-defs"&gt;
  
                  &lt;!-- Symbol with text --&gt;
                  &lt;symbol id="s-text"&gt;
                      &lt;text text-anchor="middle" x="50%" y="50%" dy=".35em" class="text"&gt;
                              Couture Book
                          &lt;/text&gt;
                  &lt;/symbol&gt;
  
                  &lt;!-- Mask with text --&gt;
                  &lt;mask id="m-text" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"&gt;
  
                      &lt;rect width="100%" height="100%" class="mask__shape"&gt;
                      &lt;/rect&gt;
                      &lt;use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#s-text" class="mask__text"&gt;&lt;/use&gt;
  
                  &lt;/mask&gt;
              &lt;/svg&gt;
  
              &lt;div class="box-with-text"&gt;
  
                  &lt;!-- Container for video --&gt;
                  &lt;div class="text-fill"&gt;
                      &lt;video class="video" src="http://tympanus.net/Tutorials/AnimatedTextFills/img/bokeh2.mp4" autoplay="" loop=""&gt;&lt;/video&gt;
                  &lt;/div&gt;
  
                  &lt;!-- Visible SVG --&gt;
                  &lt;svg viewBox="0 0 600 300" class="svg-inverted-mask"&gt;
                      &lt;rect width="100%" height="100%" mask="url(#m-text)" class="shape--fill"&gt;&lt;/rect&gt;
                      &lt;use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#s-text" class="text--transparent"&gt;&lt;/use&gt;
                  &lt;/svg&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>