I've integrated the most recent video from a YouTube channel onto my website. However, the thumbnail of the video is appearing very blurry/low quality. Is there a way to ensure a high-quality thumbnail is displayed? You can see a live demonstration here. Additionally, I've noticed that when I hit the return button on my browser after clicking the latest button, the thumbnail quality improves. Here is the jQuery code snippet:
$(document).ready(function()
{
$('#watch').on('click', function () {
$(".iframe-container").show(300, function()
{
$(".iframe-container iframe").css('opacity', 1);
$(".info").css('opacity', 0);
$("#watch").css('opacity', 0);
$(".info").css('z-index', 1);
$("#watch").css('z-index', 1);
$("video#bg-vid").css('opacity', 0);
});
$("#return").show("fast", function() { $("#return").css('opacity', 1);});
});
$('#return').on('click', function ()
{
$(".iframe-container").fadeOut("fast",function()
{
$(".iframe-container iframe").attr('style', '');
$(".info").attr('style', '');
$("#watch").attr('style', '');
$("#return").attr('style', '');
$("video#bg-vid").attr('style', '');
$('iframe').attr('src', $('iframe').attr('src')); //stops video
});
});
});
Here is the CSS for the iframe:
.iframe-container
{
z-index: 1;
display: none;
position: absolute;
background-color: transparent;
top:160px;
width:55%;
height: 55%;
color:white;
font-size: 40px;
left:0;
right:0;
margin:auto;
}
.iframe-container iframe
{
width:100%;
height: 100%;
opacity: 0;
-webkit-transition: opacity 0.3s ease-out;
-moz-transition: opacity 0.3s ease-out;
-o-transition: opacity 0.3s ease-out;
-ms-transition: opacity 0.3s ease-out;
}
Any assistance would be greatly appreciated. Thank you.