Responsive video default size
<p>I have a website using bootstrap and on the core of my page I have a picture and below is a youtube video embeded:</p>

<pre><code>    &lt;div class="col-xs-12 col-sm-12"&gt;

      &lt;a href="tech.php"&gt;
        &lt;img class="img-responsive img-rounded" src="assets/tech_withText.jpg" alt="Generic placeholder image" width="1200" height="600"&gt;
      &lt;/a&gt;

      &lt;br&gt;

      &lt;div class="embed-responsive embed-responsive-16by9"&gt;
        &lt;iframe class="embed-responsive-item" src="https://www.youtube.com/embed/RTwv1Dn2rYQ" width="300" height="150" frameborder="0" autoplay=1 allowfullscreen&gt;&lt;/iframe&gt;
      &lt;/div&gt;

    &lt;/div&gt;
</code></pre>

<p><a href="http://www.lescompanions.com" rel="nofollow noreferrer">Link to website here.</a></p>

<p>When I first load this page what I see with this solution (and dislike) is that my video extends below my screen. So I am after a way to state the size of my picture and video as a ratio of the screen size, so that my video resizes to stay within the boundaries of the screen.</p>

<p>I have looked for ideas on the internet (i.e. css edit <a href="https://stackoverflow.com/questions/33908324/responsive-video-css">as in here</a>) but I get lost or it does not do what I expect.</p>

<p>Any idea?</p>