Bảo trợ bởi
HTML - CSS Style Video Youtube Style Beautiful Youtube Embed Style For Blogspot - Khung Phát Video Youtube Đẹp

Xin chào các bạn, hôm nay mình sẽ chia sẻ cho các bạn một style dùng để embed video chuyên nghiệp, style này mình lấy từ Khanh Blogger , nó phù hợp cho các website làm phim, chia sẻ video, khi bạn embed video bằng style này bạn sẽ thấy rõ sự tiện lợi của nó.
Bộ phim xoay quanh tình bạn của 2 cô gái Thảo và Minh Anh (Ghyn) song là những sự hiểu lầm. Ngỡ là lợi dụng nhưng sự hiểu lầm đã được giải đáp bằng một hành động "tình bạn đẹp" ! ...

Cách làm

Khi bạn đăng bài viết hoặc embed video vào đâu đó, bạn chuyển sang chế độ soạn thảo bằng HTML và dán đoạn code sau :

<style>
  .breadcrumbs-right {margin-left: 0px; padding: 12px 0px 12px 0}
  .sidebar .widget, .sidebar {padding-top: 0px}
  .phantachpvc {background: #fff; border: none}
  #menuvid, .clus {display: block}
  .breadcrumbs {margin-left: 0px!important; padding-left: 0px!important}
  .main {padding-left: 0px!important}
.post-title {
font-size: 24px!important;
    font-weight: 500!important;
    line-height: 30px!important;
}
.nolyeid {
position: relative;
    display: block;
height: 585px;
}
.kbwc-header {
    position: absolute;
    bottom: 0px;
}
body {background: #fff!important}
#headertube, .post-metaDescription , .related-post, #related-posts, .knc-menu-nav, .adsvid_bottompost, .related-posts, .social-sharing-widgets, .keywords {display: none!important}
.post-body {padding-left: 0px!important}
.main-wrapper {border: none!important}
.post-body img {margin: 0 auto!important}
#logoclick {
    position: absolute;
    bottom: 10px;
    right: 10px;
}
#logoclick img {
border: 2px solid #fff;
width: 150px;
}
#timeout {
    border: 3px solid #fff;
    border-radius: 50%;
    color: #fff;
    display: block;
    font-size: 30px;
    font-weight: 300;
    height: 100px;
    line-height: 88px;
    margin: 25px auto;
    width: 100px;
    padding: 5px;
    text-align: center;
    font-family: Roboto;

}
#adsvid {
background: #000;
position: relative;
    display: block;
width: 100%;
height: 390px;
}
#giayads {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
z-index: 5;
width: 355px;
}
#tubhover {
    position: absolute;
    width: 100%;
    top: 0px;
    left: 0px;
    background: #fff;
    height: 100%;
}
#tubehover img {margin: 0px!important}
#hoverplayads {
   position: absolute;
top: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
}
.tuddj {
    color: #fff;
    top: 30%;
    display: block;
    margin: 0 auto;
    text-align: center;
    font-size: 23px;
    font-weight: 700;
}

</style>
<script>
 function getQueryVariable(variable)
{
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;vars.length >i ;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
}

var time = 3;

function countDown(){
time--;
gett("timecount").innerHTML = time;

}
function gett(id){
if(document.getElementById) return document.getElementById(id);
if(document.all) return document.all.id;
if(document.layers) return document.layers.id;
if(window.opera) return window.opera.id;
}
function init(){
if(gett('timecount')){
setInterval(countDown, 1000);
gett("timecount").innerHTML = time;
}
else{
setTimeout(init, 50);
}
}
document.onload = init();
</script>
<script>

function video(anh,videoid) {
document.write("<div id='adsvid' onmouseover='hoversharevid()'><div id='tubhover' style=''><img src='#' style='margin: 0px;width: 100%; height: 100%'/></div><div id='hoverplayads'></div><div id='giayads'></div></div>");
 document.getElementById("giayads").innerHTML = "<div class='tuddj'>Tự động phát sau</div><div id='timeout'><span id='timecount'></span></div>";
 document.getElementById("tubhover").innerHTML = "<img src='"+anh+"' style='margin: 0px;width: 100%; height: 100%'/>";
setTimeout(function() {

    document.getElementById("hoverplayads").style.display = "none";
    document.getElementById("adsvid").innerHTML = " <div class='mapfull' id='mapfull'><div id='onshareLinks'><div class='linkS'><h15 id='title15'>Chia sẻ video này:</h15> <input id='ipvd' type='text' value='"+location+"'/></div><div class='closeTagLinks'><a href='#close_click' onclick='closelink()'><i aria-hidden='true' class='fa fa-times'></i></a></div></div><div id='shareBTvid'><div class='shareBTvid' id='luvidshare'><a href='#' onclick='sharevid()' title='Chia sẻ video này'><i aria-hidden='true' class='fa fa-share-alt'></i></a><a href='https://www.youtube.com/watch?v="+videoid+"&feature="+location+"' target='_blank' title='Link video gốc'><i aria-hidden='true' class='fa fa-external-link'></i></a></div></div><div id='logoclick'></div><iframe allow='autoplay; encrypted-media' allowfullscreen='allowfullscreen' frameborder='0' height='390' src='https://www.youtube.com/embed/"+videoid+"?rel=0&controls=1&showinfo=0&autoplay=1' style='width: 100%; height: 390px; z-index: 10; position: relative;' width='100%'></iframe></div><div style='clear: both'></div>"

}, 3000);
}

  function sharevid() {
 document.getElementById("onshareLinks").style.display = "block";
 document.getElementById("luvidshare").style.display = "none";
  }
  function closelink() {
 document.getElementById("onshareLinks").style.display = "none";
 document.getElementById("luvidshare").style.display = "block";
  }
  function linkyt() {
 document.getElementById("onshareLinks").style.display = "block";
 document.getElementById("luvidshare").style.display = "none";

  }
</script>
<style>
  #onshareLinks .closeTagLinks a {color: #fff; font-size: 25px}
  #onshareLinks .closeTagLinks  {position: absolute; top: 10px; right: 10px;}
#onshareLinks .linkS input {
    border: none;
    font-family: Roboto;
    font-size: 16px;
    width: 300px;
    background: rgba(0,0,0,0.3);
    color: #fff;
    padding: 2px 10px;
    border-radius: 10px;
}
#onshareLinks .linkS h15 {
display: block;
    text-align: center;
    color: #fff;
    font-weight: 400;
    font-size: 25px;
    margin-bottom: 10px;
  }
  #onshareLinks .linkS {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
  #onshareLinks {display: none; position: absolute; top: 0px; right: 0px; z-index: 101; background: rgba(0,0,0,.50); width: 100%; height: 100%}
  #adsvid:hover #shareBTvid {display: block!important}
  #shareBTvid {position: absolute; top: 10px; right: 10px; z-index: 100; display: none;   transition: visibility 0s, opacity 5s linear;}
  .shareBTvid a {
background: rgba(0,0,0,.50);
    color: #fff!important;
    text-decoration: none!important;
    border-radius: 5px;
    font-size: 19px;
    width: 40px;
    display: block;
    text-align: center;
    height: 40px;
    line-height: 40px;
margin-bottom: 10px;
}
</style>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdkPzrOm4sqvaO94tSYd49ppAZHib6lFPoChQT9kwHTA1DDB0WdtgHyQVM0gLDMsO-Ff7jV34AaZjOcjSuFAtc2rRxSWiqFpKpM8jHYhoqOCuV7fu7YZPGbFIUXBgHQ_fBHEXjrfjz4qc/s640/the+lost+11+v%25C4%2583n+qu%25E1%25BB%2591c+h%25E1%25BB%258Dc.JPG" style="display: none;" />
<span style="display: none;">Bộ phim xoay quanh tình bạn của 2 cô gái Thảo và Minh Anh (Ghyn) song là những sự hiểu lầm. Ngỡ là lợi dụng nhưng sự hiểu lầm đã được giải đáp bằng một hành động "tình bạn đẹp" ! ...</span>
<script>
video("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdkPzrOm4sqvaO94tSYd49ppAZHib6lFPoChQT9kwHTA1DDB0WdtgHyQVM0gLDMsO-Ff7jV34AaZjOcjSuFAtc2rRxSWiqFpKpM8jHYhoqOCuV7fu7YZPGbFIUXBgHQ_fBHEXjrfjz4qc/s640/the+lost+11+v%25C4%2583n+qu%25E1%25BB%2591c+h%25E1%25BB%258Dc.JPG","pg5tSlQNUGg")
</script>
<script>
postby("11 Văn Quốc Học")
</script>
<script>
//<![CDATA[
var keyword_collect = [ "admin","adsense","bảo mật","Blog","blogger","blogspot","cài đặt","cập nhật","code","Cortana","command","dữ liệu cấu trúc","đăng nhập","fix lỗi","full disk","game","ghost","hệ thống","kích hoạt","kiếm tiền","khởi động","lock screen","Microsoft","mới nhất","multiboot","office 2016","iso","phần mềm","phục hồi","powershell script","quản lý","quản trị viên","registry","services","update","recovery","winre","reset","sao lưu","SEO","máy tính","quảng cáo","start menu","sysprep","System Apps","tài liệu","theme","thủ thuật","thủ thuật blogspot","tin tức","ứng dụng","video","Windows","Windows Apps","Windows 10","Windows 8.1","Windows 7","win pe","slide","Windows RE","Recovery","google","slider","Facebook","tags","tìm kiếm","scripts","script","powershell","WIN AIO","khanh blogger","rút gọn link","google","bitly","hacker","phú cường","nam hacker","star nhân","star cường","điện thoại","hàng dỏm","fake"]

function makeKeywordForPost(mKF_id) {
  var content;
  var isDOM = (navigator.appName.match("Microsoft Internet Explorer") || navigator.appName.match("MSIE")) ? false : true;
  if (isDOM) {
    content = document.getElementById(mKF_id).textContent;
  } else {
    content = document.getElementById(mKF_id).innerText;
  }
  var str = "";
  var link1 = "/search?q=";
  var link2 = "&max-results=20";
  for (var j = 0; j < keyword_collect.length; j++) {
    if (content.indexOf(" " + keyword_collect[j] + " ") != -1) {
      str += '<a href="' + link1 + encodeURIComponent(keyword_collect[j]) + link2 + '">' + keyword_collect[j] + '</a>';
    }
  }
  str = (str != "") ? keyword_text + str : keyword_text + "no keyword";
  document.write(str);
}
//]]></script>
<div class='keywords'>
<script>//<![CDATA[
keyword_text ="<b>Tags: </b>";
window.onLoad = makeKeywordForPost("post-body");
//]]></script>
</div>


Vậy là xong, các bạn chỉ cần sửa id video và ảnh thành id và thumb của bạn là oke

Tổng kết

Vậy là Nhân Blogger đã hướng dẫn bạn embed video siêu đẹp ( code by Khanh Blogger ) hy vọng bạn sẽ thích bài viết và tiếp tục ủng hộ Nhân Blogger.

BÌNH LUẬN (8)