Пропустить div с jQuery, а затем вернуть его обратно?

Question

У меня есть div с настройками видео, так что когда я нажимаю кнопку воспроизведения (.video-play-container), видео исчезает, а затем, когда я нажимаю кнопку закрытия (.close-video), видео исчезает. Проблема заключалась в том, что когда видео погасло, оно продолжало играть в фоновом режиме. Поэтому я освободил src этой строкой ('$(.youtube-player').attr('src', '');). Однако это было бы хорошо, если бы пользователю не нужно было снова видеть видео. Но если он хочет открыть видеоролик, src теперь пуст, поэтому он не может видеть видео. Как я могу восстановить src после того, как я его вынул, чтобы пользователь мог видеть видео более одного раза?

$('.video-play-container').click(function(e){ 
    e.preventDefault(); 
    $('.video-play-container').fadeOut(500); 
    $('.overlay').fadeIn(500).show(); 
    $('#feat-video').fadeIn(500).show(); 
}); 

$('.close-video').click(function(e){ 
    e.preventDefault(); 
    $('#feat-video').fadeOut(500); 
    $('.youtube-player').attr('src', ''); 
    $('.overlay').fadeOut(500); 
    $('.video-play-container').show().fadeIn(500); 
}); 

Edit: Обновлен код

var src; 
src = $('.youtube-player').attr('src'); 

$('.video-play-container').click(function(e){ 
    e.preventDefault(); 
    $('.video-play-container').fadeOut(2000); 
    $('.overlay').fadeIn(2000).show(); 
    $('#feat-video').fadeIn(2000).show(); 
}); 

$('.close-video').click(function(e){ 
    e.preventDefault(); 
    $('#feat-video').fadeOut(2000); 
    $('.youtube-player').attr('src', ''); 
    $('.overlay').fadeOut(2000); 
    $('.video-play-container').show().fadeIn(2000); 
    $('.youtube-player').attr('src', src); 
}); 

Edit: Обновлен код 2

var src; 
src = $('.youtube-player').attr('src'); 

$('.video-play-container').click(function(e){ 
    e.preventDefault(); 
    $('.video-play-container').fadeOut(2000); 
    $('.overlay').fadeIn(2000).show(); 
    $('#feat-video').fadeIn(2000).show(); 
}); 

$('.close-video').click(function(e){ 
    e.preventDefault(); 
    $('#feat-video').fadeOut(2000); 
    $('.overlay').fadeOut(2000); 
    $('.video-play-container').show().fadeIn(2000); 
    $('.youtube-player').attr('src', ''); 
    $('.youtube-player').attr('src', src); 
}); 

Edit: Обновлен код 3

var src; 
src = $('.youtube-player').attr('src'); 

$('.video-play-container').click(function(e){ 
    e.preventDefault(); 
    $('.video-play-container').fadeOut(2000); 
    $('.overlay').fadeIn(2000).show(); 
    $('#feat-video').fadeIn(2000).show(); 
}); 

$('.close-video').click(function(e){ 
    e.preventDefault(); 
    $('#feat-video').fadeOut(2000); 
    $('.overlay').fadeOut(2000, function() { 
     $('.youtube-player').attr('src', ''); 
    }); 
    $('.video-play-container').show().fadeIn(2000); 
    $('.youtube-player').attr('src', src); 
}); 

Edit: Обновленный код 4 (Final)

var src; 
src = $('.youtube-player').attr('src'); 

$('.video-play-container').click(function(e){ 
    e.preventDefault(); 
    $('.video-play-container').fadeOut(2000); 
    $('.overlay').fadeIn(2000).show(); 
    $('#feat-video').fadeIn(2000).show(); 
}); 

$('.close-video').click(function(e){ 
    e.preventDefault(); 
    $('#feat-video').fadeOut(2000); 
    $('.overlay').fadeOut(2000, function() { 
     $('.youtube-player').attr('src', ''); 
     $('.youtube-player').attr('src', src); 
    }); 
    $('.video-play-container').show().fadeIn(2000); 
}); 

Answer 1

Это в значительной степени определение XY problem, но если вы настаиваете ... Для того, чтобы сохранить и восстановить атрибут,

var src; 
src = $('.youtube-player').attr('src'); 
$('.youtube-player').attr('src', ''); 
// do something else 
$('.youtube-player').attr('src', src); 

Чтобы сохранить и восстановить содержимое тега,

var html; 
html = $('.youtube-player').html(); 
$('.youtube-player').empty(); 
// do something else 
$('.youtube-player').html(html) 

EDIT:

• Почему вы не убиваете игрока в конце угасания?
• Я сделал это (вы можете увидеть в обновленном коде выше), но она по-прежнему выглядит, как это имеет, что мерцание

Вы сделали не сделать это. hide(2000) есть асинхронный. Он поместит затухание в очередь, затем он немедленно очистит src и вернет его немедленно. Таким образом, мерцание, когда видео исчезает, а затем начинает загружаться обратно, все до завершения замирания. Вы хотите использовать конца-анимации обратного вызова на hide:

$('.overlay').fadeOut(2000, function() { 
    $('.youtube-player').attr('src', ''); 
    // ... 
}); 

Answer 2

Чтобы ответить на ваш вопрос прямо:

Хранить ЦСИ в атрибуте данных на YouTube-плеер с помощью Jquery.

В качестве такого кода будет:

$('.video-play-container').click(function(e){ 
    //Check if src is present, else fetches it in the data attribute of the element 
    $('.youtube-player').attr('src') || $('.youtube-player).attr('src',$(this).data('src')) 
    e.preventDefault(); 
    $('.video-play-container').fadeOut(500); 
    $('.overlay').fadeIn(500).show(); 
    $('#feat-video').fadeIn(500).show(); 
}); 

$('.close-video').click(function(e){ 
    e.preventDefault(); 
    $('#feat-video').fadeOut(500); 
    //Stores the src in the data attribute before wiping the src clean. 
    $('.youtube-player').data('src',$(this).attr('src')); 
    $('.youtube-player').attr('src', ''); 
    $('.overlay').fadeOut(500); 
    $('.video-play-container').show().fadeIn(500); 
}); 

Другая рекомендация будет использовать идентификатор, вместо класса, если у вас есть один YouTube Player. Наличие нескольких на одной странице сделает код выше.