Bug in code to transition video to full-screen on hover - css

Question

I'm working on coding a video effect that scales a video to the full viewport when hovering over it (the final implementation will not use the hover event. I'm just working on the CSS transitions between the two states). But the problem is that when I hover over the video, the height and width change smoothly, but the video position instantly jumps to the upper left-hand corner of the window rather than sliding up there smoothly. Here's a CodePen example illustrating the problem I'm having:
https://codepen.io/Jdo300/pen/abqevWo
HTML
<div id="menu">
Sidebar Menu
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet. Non incidunt tenetur eos dicta nemo vel nisi dolorem sed placeat recusandae. Ab quibusdam nihil eum voluptas illum non nostrum ratione ex fugit ipsam et earum perferendis et quaerat quia. Qui esse illo et animi incidunt ab blanditiis voluptas et quam facilis vel unde beatae aut nulla earum eos laboriosam fuga! Est atque architecto sed quia veniam ut voluptas velit. Sit internos minima a obcaecati porro est sint enim est quia architecto et velit aperiam et iure consequatur At impedit nostrum. Nam rerum minus est quis dolorem aut suscipit voluptatem id commodi libero. Rem debitis exercitationem est alias quas ut quidem consequatur ut minus adipisci cum atque incidunt. </p><p>Aut nihil quia non galisum esse ad quaerat commodi. Sed porro sapiente in adipisci neque et rerum dicta aut dolore quia eos voluptatibus aliquid. Ea iste culpa in minima sunt et similique possimus aut perferendis laudantium eos velit galisum qui possimus quibusdam sed rerum minima. Aut eius consequatur et aliquid praesentium et quis expedita id aperiam rerum sed rerum quibusdam! Et neque ipsam aut minus nostrum ea omnis perferendis in molestiae delectus. </p><p>Qui ipsam galisum rem quisquam ipsam et repellat praesentium quo dolorem perspiciatis. Sit quia praesentium qui esse dolorem est natus molestias. Qui maxime aliquid non ipsum quidem et nobis molestiae nam doloremque provident. Et laudantium iusto non accusantium aperiam et quam libero id voluptatem facere. Ut minus reiciendis 33 voluptas voluptatem et minima error non nihil nobis ut corporis ratione vel nihil ratione. Ab tempora ipsa ut tempore ipsum sed neque natus et ducimus eveniet non blanditiis quia At commodi deserunt ut molestiae molestiae. Cum sapiente tempore et dolorum explicabo At facere excepturi et dolorum labore qui officia sunt sit consequuntur aperiam. In repellat praesentium aut soluta internos ut galisum iste qui rerum minima qui veniam culpa quo aspernatur exercitationem eos dolorum excepturi. Aut libero ipsum At assumenda architecto in tempore nulla a molestias excepturi. </p><p>Et dignissimos consequuntur et voluptatem rerum eum laborum amet sit ullam facere et sequi consequatur. Et voluptates ducimus At voluptates quis aut aspernatur saepe ad consequatur sunt ut dolore omnis! Ut labore reiciendis sed consequatur modi et quia asperiores et omnis distinctio non ipsum fugiat. Est doloribus perferendis nam mollitia quisquam et delectus quia. Vel eaque repudiandae quo sunt magnam et laboriosam aliquam et expedita labore aut officiis harum. </p><p>Aut earum repellat nesciunt culpa ab dolores deleniti eum nihil animi. Et esse officia est neque architecto qui iste exercitationem et rerum amet. Ea aliquam vitae est odit tenetur ut explicabo dignissimos 33 iure magni. Et repudiandae modi ut laudantium laboriosam et possimus ipsa id praesentium officiis. Et sint autem aut tenetur consectetur est cumque vero sed tenetur obcaecati cum cupiditate placeat. Non rerum quas aut dolore quia hic voluptatem libero vel blanditiis odio est impedit saepe. Hic pariatur enim et consequatur laborum nam consequuntur veritatis est mollitia deleniti eum dolor nesciunt. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div id="video_container" align="center">
<iframe id="video" src="https://www.youtube.com/embed/w0pt7xSJJzM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<p>Lorem ipsum dolor sit amet. Et dolorem blanditiis est cupiditate libero id rerum magnam a facilis aperiam sed nisi nobis aut explicabo quod. Ad mollitia doloribus sit architecto delectus et reiciendis voluptatibus sed consequuntur perspiciatis et itaque sint. Ut illum iste vel doloribus omnis non saepe eius ut fuga perferendis aut sunt numquam aut voluptate eligendi. Qui enim placeat et omnis fugiat qui porro culpa non facere obcaecati quo modi laboriosam. </p><p>Et sunt labore est velit deserunt aut sunt culpa id aliquam ipsam aut molestiae iure eos delectus libero ab ipsum ipsum! In sint voluptatibus aut aperiam incidunt a quia galisum qui autem vitae ea doloremque facilis aut corrupti commodi est dolorum iusto. </p><p>Vel aspernatur quos sit debitis molestiae rem galisum distinctio. Ab tenetur dolores aut natus temporibus est veritatis velit sit laboriosam sit quae perspiciatis cum eveniet sapiente.</p>
<p>Lorem ipsum dolor sit amet. Et dolorem blanditiis est cupiditate libero id rerum magnam a facilis aperiam sed nisi nobis aut explicabo quod. Ad mollitia doloribus sit architecto delectus et reiciendis voluptatibus sed consequuntur perspiciatis et itaque sint. Ut illum iste vel doloribus omnis non saepe eius ut fuga perferendis aut sunt numquam aut voluptate eligendi. Qui enim placeat et omnis fugiat qui porro culpa non facere obcaecati quo modi laboriosam. </p><p>Et sunt labore est velit deserunt aut sunt culpa id aliquam ipsam aut molestiae iure eos delectus libero ab ipsum ipsum! In sint voluptatibus aut aperiam incidunt a quia galisum qui autem vitae ea doloremque facilis aut corrupti commodi est dolorum iusto. </p><p>Vel aspernatur quos sit debitis molestiae rem galisum distinctio. Ab tenetur dolores aut natus temporibus est veritatis velit sit laboriosam sit quae perspiciatis cum eveniet sapiente.</p>
</div>
CSS
body {
background: lightsalmon;
}
#menu {
position: fixed;
top: 0;
left:0;
width: 200px;
height: 100vh;
background: slategray;
}
#content {
position: absolute;
right: 0px;
left: 200px;
top: 0px;
height: 300vh;
background: lightgray;
padding: 20px;
}
#video_container {
width: 800px;
height: 480px;
background: blue;
transition: all .2s ease-in-out;
}
#video_container:hover {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: blue;
}
#video {
height: 100%;
width: 100%;
display: block;
}

Answer 1

It needs to have top and left defined before you can transition them to (0, 0).
See for example the effect works here. Now all you need to figure is how to calculate the required position. Hope that helps.
#video_container {
position: absolute;
width: 800px;
height: 480px;
top: 200px;
left: 300px;
background: blue;
transition: all .2s ease-in-out;
}
#video_container:hover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: blue;
transition: all .2s ease-in-out;
}
#video {
height: 100%;
width: 100%;
display: block;
}
<p>Aut nihil quia non galisum esse ad quaerat commodi. Sed porro sapiente in adipisci neque et rerum dicta aut dolore quia eos voluptatibus aliquid. Ea iste culpa in minima sunt et similique possimus aut perferendis laudantium eos velit galisum qui possimus
quibusdam sed rerum minima. Aut eius consequatur et aliquid praesentium et quis expedita id aperiam rerum sed rerum quibusdam! Et neque ipsam aut minus nostrum ea omnis perferendis in molestiae delectus.
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div id="video_container" align="center">
<iframe id="video" src="https://www.youtube.com/embed/w0pt7xSJJzM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<p>Lorem ipsum dolor sit amet. Et dolorem blanditiis est cupiditate libero id rerum magnam a facilis aperiam sed nisi nobis aut explicabo quod. Ad mollitia doloribus sit architecto delectus et reiciendis voluptatibus sed consequuntur perspiciatis et itaque
sint. Ut illum iste vel doloribus omnis non saepe eius ut fuga perferendis aut sunt numquam aut voluptate eligendi. Qui enim placeat et omnis fugiat qui porro culpa non facere obcaecati quo modi laboriosam. </p>