/* video.css */

/*

    EXAMPLE
    
    <div class="video-wrapper">
        <!-- make sure to change width and height to "100%"; make sure to add "?rel=0" to the end of URL - this restricts the video thumbnails/links that load after the embeded video finishes playing to only be from the WCB channel -->
        <iframe width="100%" height="100%" src="https://www.youtube.com/embed/TBkpb24SKO8?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
    </div>
    
    Note: If you don't want the video-wrapper div 100% of container width, add a wrapper around it (and change "max-width" size to whatever you need):
    
    <div style="max-width: 800px">
        <div class="video-wrapper">
            <!-- make sure to change width and height to "100%"; make sure to add "?rel=0" to the end of URL - this restricts the video thumbnails/links that load after the embeded video finishes playing to only be from the WCB channel -->
            <iframe width="100%" height="100%" src="https://www.youtube.com/embed/TBkpb24SKO8?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
        </div>
    </div>

*/

.video-wrapper {
    margin: 1em 0;
    width: 100%;
    position: relative;
    text-align: center;
    padding-top: 56.25%;
    overflow: hidden;
}

.video-wrapper iframe {
    display: block;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto auto;
}

iframe.video-screenshot {
    display: inline-block;
    width: 100%;
    max-width: 640px;
    margin: 1em 0;
}