my border isn't fitting my element

I am trying to adjust the height or even adjust the placing of the video so all the sides are even but for some reason the top of my border is longer than any of the other sides. I have tried adjusting the height but that just makes the bottom extend. I am not sure what to do. Any help would be appreciated!

    <div class="videos">

    <div id="video1">
        <iframe width="450" height="315" src="https://www.youtube.com/embed/vr0dXfQQfNU" frameborder="0" allowfullscreen></iframe>
    </div>
    <div id="video2">
        <iframe width="450" height="315" src="https://www.youtube.com/embed/fevkx229XBs" frameborder="0" allowfullscreen></iframe>
        <!--h <img src="images/vidborder2.png" class="vidborder2">-->
    </div>
</div>

div#video1 {
float: right;
border: 15px solid #373636;
box-shadow: 0px 0px 0px 8px rgba(55, 54, 54, .3);
background-color: #373636;
height: 100%;
text-align: center;

}
div#video2 {
border: 15px solid #373636;
box-shadow: 0px 0px 0px 8px rgba(55, 54, 54, .3);
width: 49.6%;
margin: 0 -2em;
background-color: #373636;
height: 100%;
text-align: center;
}
.videos {
margin-top: 65px;
}
iframe {
margin-top: 35px;
}