更改 Vimeo 播放器背景颜色答案

【问题标题】：Change Vimeo player background color更改 Vimeo 播放器背景颜色
【发布时间】：2014-03-01 00:45:40
【问题描述】：

抱歉，我不知道为什么这么难。是否可以将背景颜色从黑色更改为白色。

小提琴链接：http://jsfiddle.net/nicktest2222/MF9Q2/2/

<iframe src="https://player.vimeo.com/video/86019637?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff&amp;autoplay=1" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

【问题讨论】：

为什么要显示背景？调整你的小提琴中的 padding-bottom，它不会是可见的......

标签： javascript css html vimeo

【解决方案1】：

根据 Vimeo 论坛帖子下方的链接，这是无法做到的。

http://vimeo.com/forums/topic:109827

【讨论】：

【解决方案2】：

晚了 2 年......但我最终来到这里寻找同一个问题的答案。终于弄明白了，试试这样的：

<style>
    .embed-container {
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
        max-width: 100%;
    } 
    .embed-container iframe,
    .embed-container object,
    .embed-container embed { 
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; 
     }
</style>
<div class='embed-container'>
    <iframe src='http://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

【讨论】：

这如何改变颜色（如问题所问）？看起来它只是覆盖了通过背景颜色显示的区域。

【解决方案3】：

一种解决方法是在播放器预加载并准备好之前隐藏播放器。

<iframe id="my-video" class="my-video" src="https://player.vimeo.com/video/126091504?api=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

将您的视频设置为默认隐藏

<style>
  .my-video {
    visibility: hidden;
  }
  .my-video.ready {
    visibility: visible;
  }
</style>

然后预加载视频并等待其准备就绪：

<script>
var player = $('#my-video');
var playing = false;

function onMessageReceived(e) {
  // Handle messages from the vimeo player only
  if (!(/^https?:\/\/player.vimeo.com/).test(e.originalEvent.origin)) {
    return false;
  }

  var data = JSON.parse(e.originalEvent.data);

  switch (data.event) {
    case 'ready':
      onReady();
      break;

    case 'playProgress':
      if(!playing) {
        post('pause');
      } else {
        // wait for video to be ready before showing it to avoid flicker
        setTimeout(function() {
          player.addClass('ready');
        }, 100);
      }
      break;
}

function post(action, value) {
  // Helper function for sending a message to the player
  var data = {
    method: action
  };

  if(value) {
    data.value = value;
  }

  var message = JSON.stringify(data);
  player[0].contentWindow.postMessage(data, '*');
}


function onReady() {
  //add playProgress listener
  post('addEventListener', 'playProgress');

  //preload video
  post('play');
}

$(window).on('message', onMessageReceived);
</script>

【讨论】：