Liên hệ đặt quảng cáo

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTye7MqB78h83bDEBRu2FCMe2c9wV99qYo_q3FY-xq89pOQyhBg_vjnHayucsEDeIRMyoP7tMITx76zQMi-1gyAhOvHpnb14hnWbY4FWfX6VojxMwCWvdMiVYjPqg_4IhAbTE2aMmaWDM/s1600/gradient.png') repeat-x top left;
}
.youtube-box .youtube-title {
  background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt78Kv79GJdIBiYrJD7Y-__1VhPIHils_NNWHerK9Ie7OG63aR_Oc-n8wMQ6MZLT9Vmiq25Z29LJGLinxqUSpCSD8Z92gp4OpHEQ2h8XmsmfOmCsszZtvYzBCOlhcB9RRsaKA4jD0c0Qw/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/AVvXsEiSuHiCmhW7n1a-moxU-yI_G6LK0otgFDDEI0Xn9alEs0Kt0Hj8gwd0CS3KCnuGrhyphenhyphenkiwA4a56DyZK70jIPM1FkGitpcBWLOTh_Fx3ZTdWdAGDRz1jjNSRpaKrF4EZzQFMc1O_j85ERBxE/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

41 nhận xét:

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

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

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

    Trả lờiXóa
    Trả lời
    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à :)

      Xóa
  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 .

    Trả lờiXóa
    Trả lời
    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) :)

      Xóa
    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

      Xóa
    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 :)

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

    Trả lờiXóa
    Trả lời
    1. dùng JS load hơi chậm phải chịu thui biết sao giờ :)

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

    Trả lờiXóa
  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]

    Trả lờiXóa
  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

    Trả lờiXóa
  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?

    Trả lờiXóa
  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.

    Trả lờiXóa
    Trả lời
    1. thích thì like hay thì search bằng facbooke hay G+ đều được :)

      Xóa
  10. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  11. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  12. Bài viết rất hữu ích! Mình đã áp dụng và sau đó test chức năng Responsive Video trên mobile, iPad đều thành công. Cảm ơn bạn WINDOWS2IT rất nhiều.
    À, bạn WINDOWS2IT cho hỏi: trên giao diện laptop thì khung video hiển thị canh giữa. Muốn cho khung video canh lề trái thì chỉnh chỗ nào ạ? Bạn vào đây (http://www.myphammwhite.com.vn/2017/10/u-trang-thao-moc-mwhite.html) xem giúp mình nha.
    Cảm ơn bạn!

    Trả lờiXóa
  13. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  14. Hi, sau gần 1 ngày nghiên cứu thì mình đã biết cách chỉnh cho khung video canh lề trái khi xem trên laptop rồi. Mình post lên đây cho bạn nào gặp trường hợp như mình biết cách edit nha. Các bạn chỉ cần sửa: margin: 0 auto; thành margin: 1px 1 1 1; là Okie
    http://www.myphammwhite.com.vn/2017/10/u-thao-moc-mwhite.html

    Trả lờiXóa
  15. bảo hiểm ung thư Dai-ichi

    https://baohiemnhanthodaiichi.com.vn/bao-hiem-ung-thu-dai-ichi-life/

    Trả lờiXóa

  16. Bảo hiểm Dai-ichi cho bé

    https://baohiemnhanthodaiichi.com.vn/bao-hiem-dai-ichi-cho-be/

    Trả lờiXóa
  17. Cám ơn tác giả rất nhiều nhiều, cách thứ 2 khả thi, đã chạy ok. Nhưng cho hỏi lần sau nhúng video khác có cần phải làm lại bước 1 không admin. Có nghĩa là có cần thêm đoạn CSS vào chỉnh sửa HTML nữa không? hay chỉ chèn link ở bước 2 là được. Mong admin trả lời giúp đỡ đi nhé! Mong tin!

    Trả lờiXóa
  18. I was looking at some of your blog posts on this website and I believe this web site is real instructive! Keep posting . web design in new york

    Trả lờiXóa
  19. The video card (often referred to as the GPU) is one more significant element in any gaming rig, as it handles just about all of the graphics for your online games. A person of the difficulties with movie cards – especially the middle and low conclusion ones – is that they tend to turn out to be obsolete quicker than the other elements of a gaming computer system. Usually, getting a substantial stop video card when you’re upgrading or constructing your gaming rig is vital as it gives you breathing area in advance of it is time to upgrade once more. new york web design company

    Trả lờiXóa
  20. I genuinely enjoy looking through on this web site , it holds superb articles . san francisco design agency

    Trả lờiXóa
  21. Perfect work you have done, this site is really cool with good information. san fran design firms

    Trả lờiXóa
  22. I’ve been absent for a while, but now I remember why I used to love this website. Thank you, I will try and check back more often. How frequently you update your site? san fran design firms

    Trả lờiXóa
  23. The urge to gamble is so universal and its practice so pleasurable, that I assume it must be evil. – Heywood Broun ux design agency san francisco

    Trả lờiXóa
  24. Hello! I’ve been following your blog for a while now and finally got the courage to go ahead and give you a shout out from Kingwood Texas! Just wanted to mention keep up the good work! iphone template

    Trả lờiXóa
  25. Excellent beat ! I wish to apprentice while you amend your web site, how can i subscribe for a blog site? The account helped me a acceptable deal. I had been a little bit acquainted of this your broadcast provided bright clear idea ipad png

    Trả lờiXóa
  26. soem sites that offer download games have viruses and spywares on it. so make sure to have some antivirus on your PC,, ipad sketch

    Trả lờiXóa