Способ подражать этому заключается в наложении полностью белого абсолютно позиционированного div на iframe, в который вставлено видео, и затемнения этого div.
Установите стандартный CSS для div на «display: none;» чтобы не показывать видео, если у людей отключен JavaScript и jquery показывает его.
Образец CSS
#video_container {
position: relative;
width: 725px;
height: 430px;
}
#video_overlay {
position: absolute;
top: 0;
left: 0;
width: 725px;
height: 430px;
background-color: #FFFFFF;
}
Пример HTML
<div id="video_container">
<div id="video_overlay"></div>
<iframe width="725" height="430" src="http://www.youtube.com/embed/TxvpctgU_s8?rel=0&showinfo=0&autoplay=1&loop=1"></iframe>
</div>
1011 * JQuery *
$("#video_overlay").show();
setTimeout(function() {
$("#video_overlay").fadeOut(1500);
}, 2500);
Я использую функцию setTimeout для постепенного исчезновения наложения после загрузки видео (чтобы предотвратить черный экран загрузки). Это также можно пропустить, если вас не беспокоит экран загрузки
$("#video_overlay").show();
$("#video_overlay").fadeOut(1500);
Чтобы снова исчезнуть
$("#video_overlay").fadeIn(1500);
jsfiddle: http://jsfiddle.net/RPjXv/2/