title: angular 2 twitter player card
body: <p>I'm trying to implement twitter player card for Angular 2 project.</p>
  
  <p>According to documentation <a href="https://dev.twitter.com/cards/types/player" rel="nofollow noreferrer">https://dev.twitter.com/cards/types/player</a></p>
  
  <p>And sample code <a href="https://github.com/twitterdev/cards-player-samples" rel="nofollow noreferrer">https://github.com/twitterdev/cards-player-samples</a></p>
  
  <p>I can dynamically create meta tags for current view.
  But every player card have container where source of audio/video is placed.</p>
  
  <p>This source isn't compatible with one I send via meta tag name="twitter:player:stream"</p>
  
  <p>my tags are proper (almost same as example below, but with my urls)</p>
  
  <pre><code>    &lt;meta content='text/html; charset=UTF-8' http-equiv='Content-Type' /&gt;
      &lt;meta name="twitter:card" content="player" /&gt;
      &lt;meta name="twitter:site" content="@test" /&gt;
      &lt;meta name="twitter:title" content="Sample Player Card" /&gt;
      &lt;meta name="twitter:description" content="This is a sample video. When you implement, make sure all links are secure." /&gt;
      &lt;meta name="twitter:image" content="https://yoursite.com/example.png" /&gt;
      &lt;meta name="twitter:player" content="https://yoursite.com/container.html" /&gt;
      &lt;meta name="twitter:player:width" content="480" /&gt;
      &lt;meta name="twitter:player:height" content="480" /&gt;
      &lt;meta name="twitter:player:stream" content="https://yoursite.com/example.mp4" /&gt;
      &lt;meta name="twitter:player:stream:content_type" content="video/mp4" /&gt;
  </code></pre>
  
  <p>where the player is another Component
  to update source video from service</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  
  &lt;style type="text/css"&gt;
      video {
          width:100%;
          max-width:600px;
          height:auto;
      }
  &lt;/style&gt;
  
  &lt;video width="100%" controls&gt;
      &lt;source [src]="externalService.twitterCardVideo" type="video/mp4"&gt;
      Your browser does not support video
  &lt;/video&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>service is imported and value is visible</p>
  
  <p>but meta tags and source video are not visible in url ( I can't paste more than 2 url per post, thats why it's badly formatted)</p>
  
  <p>cards-dev.twitter.com/validator</p>
  
  <p>except that I got only succes mssages</p>
  
  <pre><code>INFO:  Page fetched successfully
  INFO:  17 metatags were found
  INFO:  twitter:card = summary tag found
  INFO:  Card loaded successfully
  </code></pre>
  
  <p>Does anyone have idea how to implement twitter play card using Angular2?</p>
  
  <p>I thought I was close enough, but maybe there is another solution.</p>