Responsive video youtube cho blogger chuẩn HTML5 và CSS3

By Unknown

Thứ Bảy, 2 tháng 8, 2014

Ở bài viết trước mình hướng dẫn thêm plugins Lightbox video youtube, củng là chủ đề có liên quan đến youtube bằng CSS3 responsive đẹp mắt  và code Javascript chuẩn HTML5 cho blogger .

Responsive video youtube cho blogger chuẩn HTML5 và CSS3

Hầu như các template responsive họ không css video cho các bạn, mà dù có có sẳn CSS và Javascript cho bạn nhưng bạn vẫn thiếu đoạn HTML chèn vào bài viết để video tùy chỉnh theo trình duyệt .
Hôm nay mình chia sẻ code responsive cho video từ YouTube chuẩn HTML5 và CSS3 dành cho các bạn hay lấy mã nhúng video từ youtube. Cái này các kênh video thì OK .
Pleu Pleu chúng ta tiến hành chèn vào template nào .

Đoạn CSS3 chuẩn  cho video youtube

/* Responsive video */
.videoyoutube{
    text-align: center;
    background:linear-gradient(to bottom, #5DE66D 0%, #15D2E2 100%);
    border:1px solid #A8A8A8;
    border-radius:5px;
    margin:20px auto;
    width:80%;
    box-shadow: 2px 30px 30px -26px #818181;
}
.video-responsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin:8px;
}
.video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border:0;
}

Cách chèn đoạn CSS3 vào template

Đầu tiên các bạn đăng nhập vào blogger.com >> Mẫu >> Chỉnh sửa HTML >> Ctrl+F >> Tìm đến thẻ ]]></b:skin> sau đó chèn đoạn CSS3 trên vào trước thẻ ]]></b:skin> sau đó lưu lại

Code responsive video youtube cho blogger chuẩn HTML5

Responsive video youtube cho blogger chuẩn HTML5

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
setTimeout(function(){
$('.video-youtube').each(function(){
$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data('src')+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5000);
//]]>
</script>
</b:if>

Sau khi thêm đoạn CSS3 xong các bạn  nhấn Ctrl+F tìm đến thẻ </body> và thêm đoạnJavascript chuẩn HTML5 trên trên thẻ </body> sau đó lưu template lại
Đây là phần không thể thiếu khi đăng bài có chèn video từ YouTube để nó co giản video theo trình duyệt . Đoạn HTML chèn vào bài viết.

<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="//www.youtube.com/embed/W8cWynGPxDU">
</div>
</div>
</div>

Lưu ý khi viết bài khi chèn code vào nhớ chuyển sang chế độ HTML nhé .  W8cWynGPxDU là đuôi video youtube muốn hiển thị
Lưu ý : Sau làm theo hướng dẫn như trên mà nó không hiện video thì các bạn thêm đoạn jquery trên thẻ</head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

Tag : Chia sẻ, CSS, HTML5