Thêm hình nền cho video youtube trên blogspot

Khi bạn muốn chia sẻ một đoạn video từ YouTube nhưng khi chúng ta embeed youtube video trong blogger nó ít được chú ý vì đã quá quen thuộc, chính vì thế tại sao ta không gắn cho nó một hình nền để làm cho nó đặc biệt hơn. Bằng cách thêm một đoạn mã đơn giản nó có thể đưa đến cho độc giả một cái nhìn khác về video YouTube trên blog của bạn. Vì vậy, nếu bạn muốn thêm hình nền thú vị cho youtube video của bạn trong bài viết vui lòng làm theo các bước hướng dẫn sau đây

Live Demo


Cách thực hiện

Để thêm hình nền cho video bạn viết bài ở chế độ HTML và sử dụng cấu trúc sau

<div style="background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2MQVTEox7dqaVFaTcUe7RjTwHbaEw_bigEPN90QUO5lIsU2AXPFr0fW2pqhXzd_1wE5YIgIaXn493XPLN_-wdCYI71DX-mFIZVnGhEQ04e1srFsEqquUnKQuDFCs0XY_-nWlkkygU81uh/s1600/troll-frame.png&quot;) no-repeat scroll left top transparent; height: 364px; margin: 0px auto; padding: 19px 0px 0px 22px; text-align: left; width: 532px;">
<iframe allowfullscreen="" frameborder="0" height="300" src="http://www.youtube.com/embed/b8j429UdkzQ" width="500"></iframe></div>
Thay thế b8j429UdkzQ thành ID video của bạn
Dòng được tô màu đỏ là ảnh nền, bạn có thể thay thế hình nền bằng một trong số các hình bên dưới bài viết

Cách lấy ID video

Video trên youtube thường có dạng
http://www.youtube.com/watch?v=b8j429UdkzQ
http://youtu.be/b8j429UdkzQ
Phần được tô màu vàng chính là ID của video trên youtube

Một số mẫu cho bạn chọn lựa






5 Comments
Comments

5 comments

Thanks bác thủ thuật rất hay :d
20/2/13
Cảm ơn bác :))
Anonymous
5/3/13
Cách đăng có thể nào đơn giản hơn không. Mình có thể chèn thẳng vào template 1 lần. Và mỗi lần đăng bài mình chỉ cần Link YouTube được không. Tất nhiên có 1 cách là lưu mẫu bài đăng và khi đăng thay link là xong. Nhưng mình vẫn muốn hỏi có cách chèn thẳng vào temp 1 lần không ? !!
Ý tưởng này sao mình không nghĩ ra nhỉ :-d
Bạn chèn đoạn code dưới sau thẻ ]]></b:skin>
.youtube{
background: url("http://3.bp.blogspot.com/-ObKmF03FZ74/URRVLqYHoRI/AAAAAAAAKpo/o0_VAvkNN6o/s1600/tvl-frame.png") no-repeat scroll left top transparent;
height: 364px;
margin: 0px auto;
padding: 19px 0px 0px 22px;
text-align: left;
width: 532px;
}

Từ giờ bạn chỉ việc đưa video vào trong thẻ <div class="youtube">Code video youtube</div>
Tuy nhiên để hiển thị đẹp nhất bạn cũng phải tùy chỉnh cho kích cỡ video là 500x300. Ví dụ
&lt;div class=&quot;youtube&quot;&gt;<iframe allowfullscreen="" frameborder="0" height="300" src="link video youtube" width="500"></iframe>&lt;/div&gt;

trong comment trên hình ảnh bạn thay bằng link ảnh, chức năng của hệ thống comment này của bác Tiến Nguyễn xịn quá đôi khi cũng gây bất lợi @-)

Cảm ơn bạn đã ghé thăm Troll VL !
» Tạm thời ngăn không cho comment với chế độ ẩn danh vì có một số bạn không có thành ý cố tình spam. Mong các bạn thông cảm!
» Bạn nên viết bằng Tiếng Việt có dấu để mọi người dễ đọc, dễ bình luận
» Để liên hệ,góp ý và đóng góp bài viết bạn click vào đây
Sử dụng các thẻ sau cho comments
» Chèn nội dung vào blockquote <b rel="quote">Nội dung blockquote</b>
» Chèn nội dung vào note <em rel="note">Nội dung note</em>
» Chèn code vào khung pre <i rel="pre">Nội dung code</i>
» Chèn hình ảnh <i rel="image">Link hình ảnh</i>
» Chèn video từ youtube [youtube]link video[/youtube]
» Chèn link <i rel="anchor">Link</i>

Insert Emoticons
:cuoi
:hihi
:thank
:haha
:meu
:cry
:oaoa
1cuoi
:D
@@
:p
:o
:vi
:ko
:ca
:why
:xin
:lanh
:im
:aoi
:ado
:mda
:tat
0:khoa
a:ab
k:ac
q:ad
w:ae
e:af
l:ag
g:ah
8:ai
9:aj
9:ag
:9a
*Phải có khoảng trống trước các code mới hiển thị mặt cười


Mã Hóa Code Tạo và xem trước comments Cancel Reply
-->