更改Vimeo播放器背景色

Question

Sorry, I'm not sure why this is so hard. Is it possible to change the background color from black to white.

Fiddle link: 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>

Answer 1

According to the link below Vimeo forum thread, this cannot be done.

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

Answer 2

A workaround is to hide the player until it has been preloaded and ready.

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

Set your video to be hidden by default

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

Then preload the video and listen for it to be ready:

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

Answer 3

2 years late...but I wound up here looking for an answer to the same question. Eventually got it figured out, try something like this:

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