javascript 更改 Vimeo 播放器背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22108553/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change Vimeo player background color
提问by Nick
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/
小提琴链接：http: //jsfiddle.net/nicktest2222/MF9Q2/2/
<iframe src="https://player.vimeo.com/video/86019637?title=0&byline=0&portrait=0&color=ffffff&autoplay=1" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
回答by Prabu
According to the link below Vimeo forum thread, this cannot be done.
根据 Vimeo 论坛帖子下方的链接，这是无法做到的。
回答by Brendan Nee
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>
回答by igloude
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:
晚了 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>
