播放时放大的 YouTube 嵌入 - Google 是怎么做到的？

Question

参考this Google support page。他们有一个嵌入的 YouTube 视频，当你点击它时，它会扩展到一个舒适的观看尺寸（704x396？）。但在默认状态下，它既漂亮又紧凑 (400x230px)，不会为专注于文本内容的观众占用空间。在展开状态下，有一个 X 按钮可以退出展开状态并暂停视频。

出于显而易见的原因，这是一种呈现嵌入视频内容的绝佳方式，但在您生成嵌入内容时，YouTube 不提供此类配置选项 link。这是 Google 支持页面的独特之处。我想对带有嵌入式视频的页面执行相同的操作，但我真的不明白哪些 div(s) 对此负责或他们是如何做的。

相关的 HTML 在这里：

<div class="html5-video-container">

<video class="video-stream html5-main-video" style="width: 400px; height: 230px; left: 0px; top: -230px; transform: none;"></video>

<div class="html5-video-content" style="width: 400px; height: 230px; left: 0px; top: 0px;">
    <div class="video-annotations iv-module">
        <div class="video-legacy-annotations html5-stop-propagation"></div>
        <div class="video-custom-annotations"></div>
    </div>
    <div class="countdowntimer hid iv-module" style="display: none;"><svg width="60" height="60"><g><circle class="countdowntimer-background-circle" cx="30" cy="30" r="15"></circle><path class="countdowntimer-diminishing-pieslice" d="M30,30 z"></path><circle class="countdowntimer-middle-dot" cx="30" cy="30" r="4"></circle></g></svg>
    </div>
</div>

<div class="html5-storyboard-framepreview" aria-hidden="true" style="display: none;"><img class="html5-storyboard-framepreview-img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="width: 400px; height: 225px; margin: 2px 0px 3px; background: url(https://i.ytimg.com/sb/bxREkVhzEkw/storyboard3_L1/M0.jpg?sigh=Mc8I4tT3lUDa1DyySVXfnCowNkw) 0px 0px / 4000px 2250px;">
</div>

<canvas width="60" height="60" class="html5-video-loader html5-center-overlay ytp-scalable-icon-grow" style="display: none; transform: scale(0.5);" aria-hidden="true"></canvas>

<div class="ytp-thumbnail html5-stop-propagation" style="background-image: url(https://i.ytimg.com/vi_webp/bxREkVhzEkw/hqdefault.webp);">
    <div class="ytp-large-play-button html5-center-overlay ytp-scalable-icon-shrink" style="transform: scale(0.638888888888889);"><svg><path fill-rule="evenodd" clip-rule="evenodd" fill="#1F1F1F" class="ytp-large-play-button-svg" d="M84.15,26.4v6.35c0,2.833-0.15,5.967-0.45,9.4c-0.133,1.7-0.267,3.117-0.4,4.25l-0.15,0.95c-0.167,0.767-0.367,1.517-0.6,2.25c-0.667,2.367-1.533,4.083-2.6,5.15c-1.367,1.4-2.967,2.383-4.8,2.95c-0.633,0.2-1.316,0.333-2.05,0.4c-0.767,0.1-1.3,0.167-1.6,0.2c-4.9,0.367-11.283,0.617-19.15,0.75c-2.434,0.034-4.883,0.067-7.35,0.1h-2.95C38.417,59.117,34.5,59.067,30.3,59c-8.433-0.167-14.05-0.383-16.85-0.65c-0.067-0.033-0.667-0.117-1.8-0.25c-0.9-0.133-1.683-0.283-2.35-0.45c-2.066-0.533-3.783-1.5-5.15-2.9c-1.033-1.067-1.9-2.783-2.6-5.15C1.317,48.867,1.133,48.117,1,47.35L0.8,46.4c-0.133-1.133-0.267-2.55-0.4-4.25C0.133,38.717,0,35.583,0,32.75V26.4c0-2.833,0.133-5.95,0.4-9.35l0.4-4.25c0.167-0.966,0.417-2.05,0.75-3.25c0.7-2.333,1.567-4.033,2.6-5.1c1.367-1.434,2.967-2.434,4.8-3c0.633-0.167,1.333-0.3,2.1-0.4c0.4-0.066,0.917-0.133,1.55-0.2c4.9-0.333,11.283-0.567,19.15-0.7C35.65,0.05,39.083,0,42.05,0L45,0.05c2.467,0,4.933,0.034,7.4,0.1c7.833,0.133,14.2,0.367,19.1,0.7c0.3,0.033,0.833,0.1,1.6,0.2c0.733,0.1,1.417,0.233,2.05,0.4c1.833,0.566,3.434,1.566,4.8,3c1.066,1.066,1.933,2.767,2.6,5.1c0.367,1.2,0.617,2.284,0.75,3.25l0.4,4.25C84,20.45,84.15,23.567,84.15,26.4z M33.3,41.4L56,29.6L33.3,17.75V41.4z"></path><polygon fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" points="33.3,41.4 33.3,17.75 56,29.6"></polygon></svg>
    </div>
</div>

<div class="html5-bezel html5-center-overlay" style="display: none;">
    <div class="html5-bezel-play"></div>
</div>

CSS和javascript我不确定。

Answer 1

您发布的 HTML 中的

None 确实符合您的想法。嵌入 iframe 内的 YouTube HTML 设计为按比例适合 iframe 节点。

虽然为了回答您的问题，他们只是使用 JavaScript 来更改嵌入式 iframe 的高度和宽度。在您发布的参考 link 中，检查 youtube 播放器，找到 iframe 节点，并在您 play/close youtube 播放器时观察内联样式。

播放时放大的 YouTube 嵌入 - Google 是怎么做到的？

YouTube embed that scales up when played - how did Google do this?

html

youtube

embed

containers