Tùy chỉnh đăng video youtube lên blogger hình ảnh chất lượng HD

Lần trước mình đã giới thiệu một cách đăng video youtube lên blogspot có ảnh thumbnail tự động nhưng cách đó có nhược điểm ảnh nhỏ và sẽ bị mờ . Hôm nay, chúng ta thảo luận về "Làm thế nào để tùy chỉnh đăng video youtube lên blogger không bị mờ ảnh thumbnail'.Trong bài này tôi sử dụng tùy chỉnh thumbnail cho youtube nhúng video và nếu bạn nhấp vào hình thu nhỏ sau đó hiển thị các video và xem video điều này giúp đăng lên ảnh tự động và nét.

Tùy chỉnh đăng video youtube lên blogger hình ảnh chất lượng HD

Điều này làm việc mã sử dụng jquery đơn giản:

$(document).ready(function(){
  $("#play").click(function(){
    $("#remove").hide();
    $("#add").show();
  });
});

và thiết kế youtube iframe sử dụng mã css với các lớp khác nhau:
.youtubeBorder
.youtube
.play

Nhấn vào play - Nhấn vào biểu tượng video sau đó hiển thị các video từ YouTube và xem video. [có thể sử dụng chức năng Autoplay sử dụng cho youtube video.]

Cách làm:
Đăng nhập Blogger =>Mẫu => Chỉnh sửa HTML
Bây giờ tìm kiếm các mã sau: </head> sao chép và dán mã dưới đây, trước </head> :
CSS Code:<style type='text/css'>
.youtubeBorder{background:none repeat scroll 0 0 #FFFFFF;border:1px solid #E0E0E0;border-radius:2px;box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);margin:10px 0 20px;padding:4px}
.youtubeBorder p.post-video{margin:0 !important}
.youtube{background-color:#000;max-width:100%;overflow:hidden;position:relative;cursor:hand;cursor:pointer;height:500px;width:100%}.youtube .thumb{bottom:0;display:block;left:0;margin:auto;max-width:100%;position:absolute;right:0;top:0;width:100%;height:auto;opacity:.8;filter:alpha(opacity=80)}
.youtube .play{filter:alpha(opacity=90);opacity:.9;height:77px;left:50%;margin-left:-38px;margin-top:-38px;position:absolute;top:50%;width:77px;background:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtSvgSPKj1cq2JOANeIfOUe_0gyF7MMkFJCjIRhkpIuAz9eHZ_Dx9ijtBH6f9xL9iKj-mfqbN_x31KeXLW5nkrFMlXSRS1Y4DcS4BLxAMVR5DRox6tAZwYQdx7ZfuNvvhW1P4fvXPLbgg/s1600/icon-share123_vn.png&quot;) no-repeat}
.play:hover {filter:alpha(opacity=100);opacity:1;}
</style>Sau khi thêm mã css và bây giờ tìm kiếm </body> tag.
Thêm mã dưới đây trước </body> tag.
HTML code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'>

</script>

<script>

$(document).ready(function(){

  $(&quot;#play&quot;).click(function(){

    $(&quot;#remove&quot;).hide();

    $(&quot;#add&quot;).show();

  });

});

</script>

Bây giờ chỉ việc copy đoạn code dưới dây và chèn vào bài đăng mới trong Blogspot ở chế độ HTML :

Tạo một bài viết mới và ở đâu bạn muốn đặt mã này, bạn chỉ cần copy đoạn mã dán bên dưới trong Phần Blogger Post HTML.<div  class='youtube' data-id='R-VXZxhHvxg'><iframe id="add" style="display:none" width="100%" height="500" src="//www.youtube.com/embed/R-VXZxhHvxg?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe><div id="remove"><img class='thumb' src="http://i.ytimg.com/vi/R-VXZxhHvxg/hqdefault.jpg"/><div class='play' id="play"></div></div></div>Tuỳ chỉnh mã nhúng này:

Cho ví dụ. Link youtube của bạn là - https://www.youtube.com/watch?v= RVEnhNzBlgM và sau https://www.youtube.com/watch?v= mã nền màu đỏ là link ID youtube.

Mã này thay thế tất cả các mã nền màu đỏ, như trên youtube nhúng mã video.
Nếu bạn muốn tự động phát video Youtube của bạn sau đó thêm? Autoplay = 1
ví dụ. https://www.youtube.com/watch?v= RVEnhNzBlgM? autoplay = 1
Sử dụng thu nhỏ tùy chỉnh của bạn cho youtube video của bạn
<img class='thumb' src=",,,,.jpg"/>
Tôi hy vọng bạn thích bài viết này chúc bạn thành công.