我想在YouTube上嵌入一个不属于我的视频（因此我无法在YouTube上进行更改）。视频的缩略图不代表视频（我指的是在您嵌入视频时显示的初始静止图像，在用户播放之前显示）。
有没有办法设置静止时间，例如我尝试传递?s=XXX但这不起作用。或者是YouTube原生的另一种方式？
答案 0 :(得分：24)
sitepoint forums中有一个很好的解决方法：
<div onclick="this.nextElementSibling.style.display='block'; this.style.display='none'">
<img src="my_thumbnail.png" style="cursor:pointer" />
</div>
<div style="display:none">
<!-- Embed code here -->
</div>
注意：为防止必须点击两次才能播放视频，请在视频嵌入代码中使用autoplay=1。当显示第二个div时，它将开始播放。
答案 1 :(得分：11)
没有。大多数YouTube视频只有一个预先生成的“海报”缩略图（480x360）。它们通常有几个其他较低分辨率的缩略图（120x90）。因此，即使有一个嵌入参数来使用备用海报图像（没有），它的结果也是不可接受的。
理论上，您可以使用播放器API将视频搜索到您想要的任何位置，但这对于次要结果来说将是一次重大攻击。
答案 2 :(得分：4)
答案对我不起作用。也许他们已经过时了。
无论如何，找到了这个为你完成所有工作的网站，甚至阻止你需要阅读不常见的google文档： http://www.classynemesis.com/projects/ytembed/
答案 3 :(得分：3)
只需将代码复制并粘贴到HTML文件中即可。并享受快乐的编码。 使用Youtube api管理youtube嵌入式视频的缩略图。
<!DOCTYPE html>
<html>
<body>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
}
});
}
function onPlayerReady(event) {
$('#play_vid').click(function() {
event.target.playVideo();
});
}
$(document).ready(function() {
$('#player').hide();
$('#play_vid').click(function() {
$('#player').show();
$('#play_vid').hide();
});
});
</script>
<div id="player"></div>
<img id="play_vid" src="YOUR_IMAGE_PATH" />
</body>
</html>
答案 4 :(得分：2)
您最好的选择是使用 http://orangecountycustomwebsitedesign.com/change-the-youtube-embed-image-to-custom-image/#comment-7289 上的教程。 这将确保没有双击，并且YouTube的视频在点击之前不会在您的图片后面自动播放。
不要像YT（YouTube）那样插入YouTube嵌入代码（你可以尝试，但它会很愚蠢）...而只是从你的视频的嵌入代码替换来源“＆amp; autoplay = 1“（将其保留在最后）。
<强>例如）
原始代码YT给出：
`<object width="420" height="315"><param name="movie" value="//www.youtube.com/v/5mEymdGuEJk?hl=en_US&version=3"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/5mEymdGuEJkhl=en_US&version=3" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>`
教程中使用的代码与YT src相同：
`<object width="420" height="315" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess"value="always" /><param name="src" value="http://www.youtube.com/v/5mEymdGuEJk?version=3&hl=en_US&autoplay=1" /><param name="allowfullscreen" value="true" /><embed width="420" height="315" type="application/x-shockwave-flash" src="http://www.youtube.com/v/5mEymdGuEJk?version=3&hl=en_US&autoplay=1" allowFullScreen="true" allowscriptaccess="always" allowfullscreen="true" /></object>`
除此之外，只需将img源和路径替换为您自己的，并且瞧！
答案 5 :(得分：1)
我遇到了waldir解决方案的自动播放问题...使用自动播放时，视频在加载页面时播放，而不是在div显示时播放。
This solution为我工作，除非我更换
<a class="introVid" href="#video">Watch the video</a></p>
与
<a class="introVid" href="#video"><img src="images/NEWTHUMB.jpg" style="cursor:pointer" /></a>
这样它就可以使用我的缩略图代替文字链接。
答案 6 :(得分：1)
ui-router给了我以下结果，这有助于我按照以下代码完成任务。
ViewController答案 7 :(得分：1)
此解决方案将在点击后播放视频。您需要编辑图片以自行添加按钮图像。
您需要提供图片的网址和YouTube视频ID。 YouTube视频ID是v=参数后的网址的一部分，因此对于https://www.youtube.com/watch?v=DODLEX4zzLQ，ID将为DODLEX4zzLQ。
<div width="560px" height="315px" style="position: static; clear: both; width: 560px; height: 315px;"> <div style="position: relative"><img id="vidimg" width="560px" height="315px" src="URL_TO_PICTURE" style="position: absolute; top: 0; left: 0; cursor: pointer; pointer-events: none; z-index: 2;" /><iframe id="unlocked-video" style="position: absolute; top: 0; left: 0; z-index: 1;" src="https://www.youtube.com/embed/YOUTUBE_VIDEO_ID" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div></div>
<script type="application/javascript">
// Adapted from https://stackoverflow.com/a/32138108
var monitor = setInterval(function(){
var elem = document.activeElement;
if(elem && elem.id == 'unlocked-video'){
document.getElementById('vidimg').style.display='none';
clearInterval(monitor);
}
}, 100);
</script>
请务必替换上述代码段中的URL_TO_PICTURE和YOUTUBE_VIDEO_ID。
为了说明此处发生了什么，这会在视频顶部显示图片，但允许点击通过图片。该脚本监视视频iframe中的点击次数，然后在发生单击时隐藏图像。您可能不需要float: clear。
我还没有将此与其他答案进行比较，但这是我用过的。
答案 8 :(得分：0)
使用来自waldyrious的答案的概念，我创建了以下解决方案，该解决方案还解决了在选项卡还原或使用浏览器的后退按钮来播放视频背后的问题回到带有视频的页面。
<div class="js-video-lead">
<img class="hide" src="link/to/lead/image.jpg" />
<iframe frameborder="0" height="240" src="https://www.youtube.com/embed/<code here>" width="426"></iframe>
</div>
＆＃34;隐藏＆＃34; class来自Bootstrap，只需应用display: none;，以便在禁用JavaScript时页面加载时无法显示图像。
function video_lead_play_state(element, active)
{
var $active = $(element).closest(".js-video-lead").find(".btn-play-active");
var $default = $(element).closest(".js-video-lead").find(".btn-play-default");
if (active) {
$active.show();
$default.hide();
} else {
$active.hide();
$default.show();
}
}
$(document).ready(function () {
// hide the videos and show the images
var $videos = $(".js-video-lead iframe");
$videos.hide();
$(".js-video-lead > img").not(".btn-play").show();
// position the video holders
$(".js-video-lead").css("position", "relative");
// prevent autoplay on load and add the play button
$videos.each(function (index, video) {
var $video = $(video);
// prevent autoplay due to normal navigation
var url = $video.attr("src");
if (url.indexOf("&autoplay") > -1) {
url = url.replace("&autoplay=1", "");
} else {
url = url.replace("?autoplay=1", "");
}
$video.attr("src", url).removeClass(
"js-video-lead-autoplay"
);
// add and position the play button
var top = parseInt(parseFloat($video.css("height")) / 2) - 15;
var left = parseInt(parseFloat($video.css("width")) / 2) - 21;
var $btn_default = $("<img />").attr("src", "play-default.png").css({
"position": "absolute",
"top": top + "px",
"left": left + "px",
"z-index": 100
}).addClass("btn-play btn-play-default");
var $btn_active = $("<img />").attr("src", "play-active.png").css({
"display": "none",
"position": "absolute",
"top": top + "px",
"left": left + "px",
"z-index": 110
}).addClass("btn-play btn-play-active");
$(".js-video-lead").append($btn_default).append($btn_active);
});
$(".js-video-lead img").on("click", function (event) {
var $holder = $(this).closest(".js-video-lead");
var $video = $holder.find("iframe");
var url = $video.attr("src");
url += (url.indexOf("?") > -1) ? "&" : "?";
url += "autoplay=1";
$video.addClass("js-video-lead-autoplay").attr("src", url);
$holder.find("img").remove();
$video.show();
});
$(".js-video-lead > img").on("mouseenter", function (event) {
video_lead_play_state(this, true);
});
$(".js-video-lead > img").not(".btn-play").on("mouseleave", function (event) {
video_lead_play_state(this, false);
});
});
此解决方案需要jQuery，它应该在同一页面上使用多个嵌入的视频（具有不同的潜在客户图像）。
该代码使用两张图片play-default.png和play-active.png，这些图片是YouTube播放按钮的小图片（42 x 30）。 play-default.png是黑色的，具有一定的透明度，最初显示。 play-active.png为红色，当用户将鼠标移到图像上时显示。这模仿了普通嵌入式YouTube视频所呈现的预期行为。
答案 9 :(得分：0)
可以使用jQuery，这取决于您可以调整超时的网站加载时间。 它可以是您的自定义图像，也可以使用youtube图像maxres1.jpg，maxres2.jpg或maxres3.jpg
var newImage = 'http://i.ytimg.com/vi/[Video_ID]/maxres1.jpg';
window.setTimeout(function() {
jQuery('div > div.video-container-thumb > div > a > img').attr('src',newImage );
}, 300);
答案 10 :(得分：0)
此解决方案是基于HTML和CSS的，使用z-index和hover，如果禁用了JS或视频不是您的（因为您可以在YouTube中添加缩略图），该解决方案就可以使用。
JSONEncoder