title: Position the <li> dot at the top
body: <p>I'm trying to get the bulletpoint in a list to align at the top of the instead of the bottom.</p>
  
  <p>Here is an example of what I mean: <a href="https://jsfiddle.net/2ma994cr/" rel="nofollow">https://jsfiddle.net/2ma994cr/</a></p>
  
  <pre><code>&lt;ul class="a"&gt;
      &lt;li&gt;Thing 1&lt;/li&gt;
      &lt;li&gt;&lt;iframe width="420" height="315" src="https://www.youtube.com/embed/3B49N46I39Y" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;&lt;/li&gt;
      &lt;li&gt;Thing 3&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>As you can see in the fiddle, the bulletpoint for the embedded object is at the bottom.</p>
  
  <p>Is there an <code>&lt;li&gt;</code> style I can add in CSS that will align it to the top or another way around this?</p>