JQuery, исчезнуть в YouTube вставлять iframe

Я пытаюсь исчезнуть при вставке iframe на youtube, но он работает только в IE9, во всех других новейших браузерах (Safari, Opera, Chrome, Firefiox) - нет. Iframe показывается сразу же после установки непрозрачности на 0.

Я на Windows.

В чем я не прав?

PS: это хорошо работает с Vimeo YouTube вставки iframe.

JsFiddle:

http://jsfiddle.net/jgtSS/26/

Источник

2 ответа

Решение

По соображениям безопасности встроенный кадр становится полностью видимым, когда уровень альфа-канала (непрозрачность / фон) в iframe/ ближайшем слое уменьшается. Таким образом, даже когда непрозрачность установлена 0.99999, рамка показывает вверх.

Я создал решение этой проблемы: создайте два слоя одинакового размера и добавьте их сразу после родителя iFrame.

  1. Прикрепите фон к первому изображению, которое является предварительным просмотром видео.
  2. Например, установите фон второго div для фона страницы. white,

Затем анимируйте второй DIV до непрозрачности 0. Фон на первом изображении становится более заметным. В конце анимации скройте первый div с помощью функции обратного вызова:

Чтобы позволить пользователю активировать видео во время анимации, свяжите обработчик события щелчка с DIV, который сразу скрывает слои, и вызовите playVideo метод встроенного видео.

Для вызова playVideo Метод, вам нужна ссылка на встроенное видео. Поскольку вы не создали видео с помощью API видео YouTube, вы не можете использовать глобальную переменную для доступа к видео. Некоторое время назад я создал функцию для вызова методов во встроенном видео.
Читайте: YouTube iframe API: как мне управлять плеером iframe, который уже находится в HTML?

Финальный код

Я создал живой пример на скрипке: http://jsfiddle.net/jgtSS/34/. Полный код также показан ниже.

<html><head>
<style>
#holder, #ID-of-first-div, #ID-of-second-div{
    position:absolute;
    width:320px;
    height:240px;
    top:0px;
    left:0px;
}
#ID-of-first-div, #ID-of-second-div {
    background: #FFF;
}
#btn1{
    position:absolute;
    background:#09C;
    width:40px;
    height:40px;
    top:250px;
    left:0px;

}
</style>
<script type="text/javascript">
$(window).load(function() {
    $('#btn1').click(function(){
        var vid_id = $('#player').get(0).src.match(/embed\/([^?]+)/)[1];
        var vid_bg = 'http://i2.ytimg.com/vi/'+vid_id+'/hqdefault.jpg';
        $('<img>').attr("src", vid_bg).css({width:'100%',height:'100%',border:'none'}).appendTo('#ID-of-first-div');
        $('#ID-of-second-div').animate({opacity: 0 }, 3000, function(){
            $('#ID-of-first-div').hide();
        });
        var both = $('#ID-of-first-div, #ID-of-second-div');
        both.click(function(){
            both.hide();
            callPlayer('player', 'playVideo');
        });
    });
});
/*
 * @author       Rob W (https://stackru.com/questions/7443578/youtube-iframe-api-how-do-i-control-a-iframe-player-thats-already-in-the-html/7513356#7513356)
 * @description  Executes function on a framed YouTube video (see previous link)
 *               For a full list of possible functions, see:
 *               http://code.google.com/apis/youtube/js_api_reference.html
 * @param String frame_id The id of the div containing the frame
 * @param String func     Desired function to call, eg. "playVideo"
 * @param Array  args     (optional) List of arguments to pass to function func*/
function callPlayer(frame_id, func, args){
    if(!document.getElementById(frame_id)) return;
    args = args || [];

    /*Searches the document for the IFRAME with id=frame_id*/
    var all_iframes = document.getElementsByTagName("iframe");
    for(var i=0, len=all_iframes.length; i<len; i++){
        if(all_iframes[i].id == frame_id || all_iframes[i].parentNode.id == frame_id){
           /*The index of the IFRAME element equals the index of the iframe in
             the frames object (<frame> . */
           window.frames[i].postMessage(JSON.stringify({
                "event": "command",
                "func": func,
                "args": args,
                "id": 1/*Can be omitted.*/
            }), "*");
        }
    }
}
</script>
</head><body>
<div id="holder">
   <iframe id="player" type="text/html" width="320" height="240"
  src="http://www.youtube.com/embed/u1zgFlCw8Aw?wmode=transparent?enablejsapi=1"
  frameborder="0"></iframe>
</div>
<div id="ID-of-first-div"></div>
<div id="ID-of-second-div"></div>

<div id="btn1"></div>
</body></html>
Источник

Вы должны добавить wmode=opaque к URL-адресу YouTube. Чем оно будет плавно исчезать. Как htis

<iframe src="http://www.youtube.com/embed/a-TrP8Z3Cb8?wmode=opaque" ...

Благодаря Canolucas awnser нашел здесь: /questions/25775000/javascript-ischezat-v-ischezayut-div-s-youtube-video/25775007#25775007

Источник
Другие вопросы по тегам