Tạo short code chèn iframe Youtube với style chuyên nghiệp

Trong quá trình viết bài cho blog đôi khi bạn sẽ cần nhúng các video từ youtube vào trang của mình. Tuy nhiên iframe khi nhúng có code rất dài và style chưa được bắt mắt cho lắm. Trong bài này tôi sẽ chia sẻ cho bạn cách Tạo short code chèn iframe Youtube với style chuyên nghiệp

Xem demo

demo
Cách thức hoạt động của code này rất dễ hiểu thôi. Người dùng định nghĩa 1 tag HTML (ở đây tôi chọn tab <youtube></youtube>), sau đó đặt id video vào tag đó. Dùng jQuery get id và tạo iframe với style đặt trước

Như vậy bạn có thể thấy sự tiện lợi ở đây đó là bạn không cần thiết phải nhớ quá nhiều code, chỉ cần định nghĩa 1 tag html và chèn id video youtube vào (id video youtube luôn xuất hiện sau đoạn ?v= trên thanh url nhé)

Tích hợp jQuery nếu blog bạn chưa có

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

Viết CSS

.youtube-wrap{width:100%;max-width:650px;margin:15px auto}
.youtube-inner{position:relative;padding-bottom:43%;padding-top:0;height:0;overflow:hidden;border-image:url('https://i.imgur.com/TktXOMG.png') 50 233 112 228 stretch stretch;border-color:rgba(0,0,0,0);border-width:27px 76px 55px 76px;border-style:inset}
.youtube-inner iframe,.youtube-inner object,.youtube-inner embed{position:absolute;top:0;width:100%;height:100%;background-color:#ddd}
youtube{visibility:hidden}
youtube div{visibility:visible}
@media all and (max-width:500px){.youtube-inner{border-width:20px 62px 40px 62px}}
@media all and (max-width:400px){.youtube-inner{border:none!important}}

Chèn code js trước thẻ đóng </body>

<script type='text/javascript'>//<![CDATA[
$("youtube").each(function(){
    $(this).append('<div class="youtube-wrap"><div class="youtube-inner"><iframe width="560" height="315" src="https://www.youtube.com/embed/'+ $(this).text() +'?rel=0&theme=dark&controls=1&showinfo=0&autohide=0" frameborder="0" allowfullscreen=""></iframe></div></div>'); 
});
//]]></script>

Như vậy mỗi khi viết bài mà muốn chèn video youtube tôi sẽ chuyển tab HTML và dùng code sau

<youtube>id video</youtube>

Rất đơn giản dễ nhớ và đầy quý tộc đúng không Thủ thuật không có gì khó hi vọng bạn áp dụng thành công cho blog của mình !

Good Luck !