Tạo chức năng Responsive Video chèn (nhúng) từ Youtube vào Blogspot

Youtube là một dịch vụ lưu trữ và chia sẽ Video phổ biến nhất hiện nay, Youtube cũng cho chép người dùngnhúng (hoặc chèn) trực tiếp video vào trong Blog/Website. Tuy nhiên Youtube lại không hỗ trợ chức năng Responsive khi ta sữ dụng mã nhúng (hay chèn) trực tiếp vào Blog/Website.

Bình thường câu chuyện này khá là Oke đối đối với những Blog/Website có giao diện tĩnh còn đối với Blog/Website có chức năng Responsive (tự động co giãn theo màn hình) thì khi thu nhỏ màn hình lại thì Video đó vẫn giữ nguyên kích thước ban đầu ta quy định trọng mã nhúng.

Điều này sẽ làm mất tính thẩm mỹ hoặc gây khó khăn cho người dùng những thiết bị di động vốn có kích thước hiển thị nhỏ hơn rất nhiều so với máy tính để bàn hay laptop… Hôm nay, sẽ hướng dẫn các bạn “Cách tạo chức năng Responsive Video chèn từ Youtube vào Blogspot nói riêng hay Website nói chung”. Mình xin đưa ra 2 cách cho các bạn lựa chọn MỘT LÀ SỬ DỤNG JS, HAI LÀ SỬ DỤNG CSS. Theo mình nghĩ 2 cách này đều rất tuyệt, các bạn dùng cách nào cũng được (Đều thể hiện sự chuyên nghiệp hiện khi chèn Video từ Youutube vào Blog/Website của bạn).

☼ Bắt đầu thủ thuật !

Cách 1: Sử dụng JS.

Bước 1: Vào Blog => Mẫu => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ </body>. Sau đó dán đoạn mã Code sau ở phía trên thẻ </body>.

<script type='text/javascript'>
//<![CDATA[
// Original Script by DTE :]
// Optimized and Modified by Kang Ismet
$(function() {
    $('a.youtube-link').each(function() {
        var yt_url   = this.href,
            yt_id    = yt_url.split('?v=')[1],
            yt_title = $(this).text();
        $(this).replaceWith('<div class="youtube-box"><img class="youtube-img" src="http://img.youtube.com/vi/' + yt_id + '/0.jpg" alt="youtube" ></img><span class="gradient"></span><span class="youtube-title">' + yt_title + '</span><span class="youtube-play"></span></div>');
        $('div.youtube-box').click(function() {
            $(this).replaceWith('<div class="youtube-frame"><div class="videoWrapper"><iframe src="http://www.youtube.com/embed/' + yt_id + '?autoplay=1" frameborder="0" allowfullscreen></iframe></div></div>');
        });
    });
});
//]]>
</script>  

Bước 2: Tiếp theo đó nhấn tổ hợp phím Ctrl + F và tìm đến thẻ </b:skin>. Sau đó dán đoạn mã Code sau ở phía trên thẻ </b:skin> và Lưu mẫu lại.

.youtube-box {
    text-align:center;
    background-color: black;
    width: 640px;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}
.youtube-frame {
    background-color: black;
    width: 640px;
    height: auto;
    max-width: 100%;
    text-align: center;
    margin: 0 auto;
}
.youtube-img {
    position: relative;
    height: 100%;
    width: 100%;
    margin-top: -7%;
    margin-bottom: -8.5%;
    transform: scale(1.1);
}
.youtube-box span {
  display:block;
  position:absolute;
  top:0px;
  right:0px;
  bottom:0px;
  left:0px;
}
.youtube-box .gradient {
    background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXc4dqkG-ItPPYWdmupOzrYVp_fU7kJ32CUay6oO5K09u1p5SMPCI_agLCQD2jISFnOBmiAoPkme8_tFq1bPQgm4Rd2YTm9PTTExj2LcDS7stSD0PUF4qtSP1hujz3EXRYqhy2lOyy9wc/s1600/gradient.png') repeat-x top left;
}
.youtube-box .youtube-title {
  background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn7nwYYaCJCv3Ud8ENEeqjXuDE6BkB5oRXMYHW4AfQS6Xz2OSZPrbCmQYOCMeZLhgv_uV7gkbmfFfe-RhRSB8Y1ecuPK32GpvqmK7Zx5_il9z4LUrz8vmTPre0iPYEVGqDuIAgf6sPpog/s1600/t-title-bg.png') no-repeat 98% 50%;
  font:normal 19px Arial,Sans-Serif;
  color:white;
  text-shadow:0px 1px 2px black;
  bottom:auto;
  line-height:40px;
  height:40px;
  overflow:hidden;
  padding:0px 15px;
  text-align: left;
}
.youtube-box .youtube-play {
  cursor:pointer;
  width:74px;
  height:52px;
  top:50%;
  left:50%;
  margin:-26px 0px 0px -40px;
  background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpVaCoBMvml7Zorqp34oivBoyr_D8K2efVy37n0cKeosuHBUC-Qa4PsQWs-KZdmubj8lxhPzpVMq0yMDvV-q-vSGa1HcsCLPA2aXx2ELsMI5Yyu_2Mz8ImnAXh-3-IHmO2eoMeQXfzTog/s1600/yt-play-new.png') no-repeat top left;
}
.youtube-box .youtube-play:hover {
  background-position:bottom left;
}
.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}  

Bước 3: Chèn Video từ Youtube vào trong bài viết bằng cú pháp dưới đây:

<a class="youtube-link" href="https://www.youtube.com/watch?v=CevxZvSJLk8" rel="nofollow">Tên mà bạn muốn hiển thị</a>   

DEMO

Cách 2: Sử dụng CSS.

Bước 1: Vào Blog => Mẫu => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ </b:skin>. Sau đó dán đoạn mã Code sau ở phía trên thẻ </b:skin> và Lưu mẫu lại.

Nếu bạn muốn Video có tỉ lệ 16:9

.video-container {
    position: relative;
    padding-bottom: 56.25%;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}  

Nếu bạn muốn video có tỉ lệ 4:3

.video-container {
    position: relative;
    padding-bottom: 75%;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}  

Bước 2: Nhúng Video từ Youtube vào trong bài viết bằng cú pháp dưới đây:

<div class="video-container">
<iframe width="" height="" src="//www.youtube.com/embed/" frameallowfullscreen></iframe>
</div>  

DEMO

☼ Tùy chỉnh:

·        Thay đường link màu đỏ thành đường link Video từ Youtube bạn muốn chèn vào (Chú ý: là Đường link nhé @!)

·        Thay phần màu vàng thành mã nhúng Video từ Youtube mà bạn muốn chèn vào (Chú ý: là Mã nhúng nhé <Mã nhúng mà đường link là hai cái hoàn toàn khác nhau>) đồng thời bỏ chiều cao và chiều rộng mặc định của mã nhúng đó đi … Chắc hẳn lấy mã nhúng từ Youtube các bạn biết cách lấy rồi nhỉ @! ... Click chuột phải vào Video chọn Sao chép mã nhúng vậy là xong.

Chúc các bạn thành công