youtube - YouTube 自动调整大小

Question

如果将 YouTube 视频嵌入网页中，是否有办法使其尺寸变小（例如 200 x 150），然后在播放时将其重新调整为更大尺寸（例如 400 x 300）。一个示例是在 Gmail 中收到视频时。

Answer 1

您可以尝试让 javascript 监听播放器的 onStateChange 事件，当状态更改为“1”（正在播放）时，您将宽度和高度更改为新大小。也许这样的事情可以工作：

var player = document.getElementById("youtube-player");

function onPlayerStateChange(evt) {
  if (evt.data == "1") {
    player.style.width = "400px";
    player.style.height = "300px";
  }
}

player.addEventListener("onStateChange", onPlayerStateChange);

您可以在此处使用 javascript api：https ://developers.google.com/youtube/youtube_player_demo这里是参考：https ://developers.google.com/youtube/iframe_api_reference#Events这假设它是一个嵌入你在网页上，我真的不明白你的意思是“......视频在Gmail中收到”。

Answer 2

您可以尝试将点击事件绑定到标签，然后将元素调整为更大的尺寸，但我猜测 Flash 视频播放器会劫持点击事件而不是将其冒泡到 DOM。

否则，您可以使用海报图像占位符，然后单击该占位符，将图像替换为您想要的任何大小的实际视频播放器。