How to resize a video to fit the size of image above it?

I'm trying to find a way to scale the video to fit the same width as my header photo. How would I scale the video up to the same size as in the original website? Here's the codepen; https://codepen.io/anon/pen/wZbjNw For reference, I'm trying to mimic this website: https://jackwhiteiii.com/ Thanks!

    <header>

        <div class="headerlogo">
            <img class="jwlogo" src="https://jackwhiteiii.com/wp-content/themes/lazaretto/images/JW_BHR_SplashPage_tiny.jpg" alt="Header Logo">
        </div>


    </header>



    <container>
        <div class="video">
            <iframe class="vevovideo" width="560" height="315" src="https://www.youtube.com/embed/8vKTaoxvZMY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
    </container>

    .jwlogo{

            max-width: 69%;
            height: auto;
            padding:13px;
            image:no-repeat



    }

    .video{
        text-align: center;
        width: 100%;
        height: 100%;
        padding:13px;

    }