Embeding video repsonsive in html page

How do responsive in embeded video in html page

1. Embed video code from youtube or anywhere
2. HTML code is below
3. CSS code is below

Just change your video path only everything tested, working perfectly.

<div class="main-video-container">
                <div class="myvideowraper">
                    <!-- Copy & Pasted from YouTube -->
                            <iframe width="764" height="429" src="videoembedcodehere" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                </div>
</div>
                                         

<style type="text/css">


/* Embeded video responsive */
.myvideowraper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 0px;
  height: 0;
}
.myvideowraper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* End video responsive */


.main-video-container{ max-width:  767px !important; overflow-x: hidden; margin:0px auto; }

 @media only screen and (max-width:1366px) {
.main-video-container{ max-width:  767px !important; overflow-x: hidden; margin:0px auto; }
}



/* flex box css */

.mainsection-items{flex-direction:row; display: flex; align-items: center; justify-content: center; min-height: 200px; height: 100%;  border: solid 1px #ccc }
.box1{ width: 33.3%; }
</style>