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

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ùng nhú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.

 Đọc thêm:



Đ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).

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

☼ 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="https://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="https://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>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://1.bp.blogspot.com/-QtFxtA8Fmp8/ViUWz6Dt3SI/AAAAAAAAG_M/0Kk29wYynsU/s1600/gradient.png') repeat-x top left;
}
.youtube-box .youtube-title {
  background: transparent url('https://3.bp.blogspot.com/-pp7s5v5KeBI/ViUW0EI5ClI/AAAAAAAAG_Q/vRLq1Oet22Q/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://4.bp.blogspot.com/-Vj3xOT3Jiis/ViPsv-_82rI/AAAAAAAAG-Q/3jc6mgYR5f4/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
Tên bạn muốn hiển thị
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>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 !

Tham khảo: BlogKangismet


Support gì thì cứ để lại comment @!
Liên hệ đặt quảng cáo
Quảng cáo trên windows2it.com

About Quang Mến :

Tôi là Quang Mến. Tôi viết blog theo phong cách chuyên nghiệp. ^^! Dựa trên niềm đam mê học hỏi và mong muốn chia sẽ với mọi người @@!
Theo dõi tôi trên:
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

19 nhận xét:

  1. mod thêm cái đóng dấu vào đi bạn

    ReplyDelete
    Replies
    1. Chưa hiểu ý bạn lắm : thêm cái đóng dấu là sao vậy bạn ? :(

      Delete
  2. Đóng dấu logo vào video đó bạn

    ReplyDelete
    Replies
    1. À! cái này Bạn dùng phần mềm Proshow Producer để đóng dấu Video, thực hiện dễ mà :)

      Delete
  3. bạn vẫn chưa hiểu ý mình . ý mình là dóng dấu logo nên video dùng css hay js nên trực tiếp video youtube luôn .

    ReplyDelete
    Replies
    1. Theo kiến thức của mình thủ thuật này không làm được Bạn à video youtube là mình nhúng từ youtube vào hoàn toàn độc lập với Blogspot...Mình ko thể can thiệp như bạn nói là đóng dấu logo lên video được (Hoặc có thể là có mà mình kiến thức hạn hẹp nên mình ko biết) :)

      Delete
    2. Bạn không thể đóng dấu bằng js hay css trên blogspot. bạn chỉ có thể chèn thêm logo khi xem thôi, nhưng hị tải về thì logo đó sẽ mất.
      thay vào đó bạn hãy đóng dấu ngay khi tải lên youtube
      đây là hướng dẫn:
      http://thuthuat.taimienphi.vn/chen-them-tao-logo-ban-quyen-cho-video-youtube-2366n.aspx
      chúc bạn thành công với kênh của mình
      thân ái và quyết thắng

      Delete
    3. Như lời Bác ĐÔI GUỐC MỘC BLOG nói ___ việc đóng dấu bản quyền logo bản quyền cho video nếu làm được chỉ là cái vỏ bên ngoài thui __ Tốt nhất là bạn đóng dấu bản quyền trước khi UP video lên là Oke nhất :)

      Delete
  4. mình cũng đang dùng js để dóng đấu . load trang hơi lâu

    ReplyDelete
    Replies
    1. dùng JS load hơi chậm phải chịu thui biết sao giờ :)

      Delete
  5. mình tưởng có thể dùng css thì ngon.

    ReplyDelete
  6. demo [url=http://www.kenhvungtau.net/2015/11/co-moi-noi-cu-ho-gia-khanh.html] http://www.kenhvungtau.net/2015/11/co-moi-noi-cu-ho-gia-khanh.html[/url]

    ReplyDelete
    Replies
    1. Đẹp đó bạn .. Đóng dấu video nhìn rất đẹp :)

      Delete
  7. vậy chèn mã này thì có được không iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/XaeK5wiALis/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/XaeK5wiALis?feature=player_embedded" width="500"></iframe

    ReplyDelete
    Replies
    1. Được ko bạn chèn thử là biết liền ___ :)

      Delete
  8. Với thủ thuật này khi mình chèn video nào thì video đó sẽ hiển thị trong tất cả các bài viết không phân biệt nhãn đúng không anh?

    ReplyDelete
  9. ko tìm thấy nút like trên trang này nhỉ, cảm ơn bài viết hữu ích.

    ReplyDelete
    Replies
    1. thích thì like hay thì search bằng facbooke hay G+ đều được :)

      Delete