代码中的错误以将视频转换为悬停的全屏

Question

我正在努力编码视频效果，该视频效果将视频扩展到整个视口时（最终实现将不使用悬停事件。我只是在两种状态之间进行CSS过渡）。但是问题在于，当我悬停在视频上时，高度和宽度会顺利改变，但是视频位置立即跳到窗户的左上角，而不是平稳地滑动。这是一个codepen示例，说明了我存在的问题：

https://codepen.io/jdo300/pen/pen/pen/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

它需要具有top和左在将它们转换为（0，0）之前定义的。
例如，请参见此处的效果。现在，您需要弄清楚的是如何计算所需的位置。希望有帮助。

#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>