Chủ đề: Code thu nhỏ video, iframe vừa màn hình điện thoại, máy tính bảng

YouTube, Vimeo và những dịch vụ lưu trữ video khác, thường có chức năng cho phép người dùng nhúng video vào trong trang web hay blog của chính họ. Tuy nhiên Youtube, Vimeo hay những dịch vụ tương tự lại không hỗ trợ chức năng responsive video khi ta nhúng vào. Tức là những video đó sẽ không tự động thu nhỏ lại mỗi khi kích thước màn hình thay đổi. Và điều này thật sự sẽ gây khó khăn cho người dùng những thiết bị di động vốn dĩ 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.

Trong bài viết ngắn ngủi ngày hôm nay, mình sẽ bày cho các bạn một cách có thể tạo chức năng responsive cho những video khi ta chúng ta nhúng nó vào web hay blog.


Bước 1 : Lấy YouTube Embed Code

– Vào Youtube.
– Tìm Video mà các bạn muốn nhúng vào website hay blog của mình.
– Click vào Share >> Embed >> Nhấp chuột phải rồi copy HTML code.




Bước 2 : Nhúng vào web

Các bạn dán đoạn code đã copy ở bước 1 vào bất kì vị trí nào mà các bạn muốn hiển thị video trên trang web của mình. Đoạn code sẽ tương tự như thế này :

Mã:

<iframe width="420" height="315" src="http://www.youtube.com/embed/6xisazZX9bA" frameborder="0" allowfullscreen></iframe>

Bước 3 : Tạo chức năng Responsive

Mẹo ở đây là chúng ta sẽ chèn thêm một thẻ div bao quanh toàn bộ đoạn code mà chúng ta vừa nhúng vào web.

Mã:

<div class="video-responsive">
    <iframe width="420" height="315" src="http://www.youtube.com/embed/6xisazZX9bA" frameborder="0" allowfullscreen></iframe>
</div>

Bước 4 : Chèn CSS

Bây giờ là phần cuối cùng, các bạn chỉ cần copy đoạn css bên dưới cho thẻ <div> mà chúng ta tạo ở bước 3.

Mã:

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

Bây giờ các bạn có thể tự kiểm chứng bằng cách thay đổi kích thước màn hình là có thể thấy được ngay kết quả.

Chúc các bạn thành công !

Gửi bởi XuanNghia92

YouTube, Vimeo v&#224; những dịch vụ lưu trữ video kh&#225;c, thường c&#243; chức năng cho ph&#233;p người d&#249;ng nh&#250;ng video v&#224;o trong trang web hay blog của ch&#237;nh họ. Tuy nhi&#234;n Youtube, Vimeo hay những dịch vụ tương tự lại kh&#244;ng hỗ trợ chức năng responsive video khi ta nh&#250;ng v&#224;o. Tức l&#224; những video đ&#243; sẽ kh&#244;ng tự động thu nhỏ lại mỗi khi k&#237;ch thước m&#224;n h&#236;nh thay đổi. V&#224; điều n&#224;y thật sự sẽ g&#226;y kh&#243; khăn cho người d&#249;ng những thiết bị di động vốn dĩ c&#243; k&#237;ch thước hiển thị nhỏ hơn rất nhiều so với m&#225;y t&#237;nh để b&#224;n hay laptop.

Trong b&#224;i viết ngắn ngủi ng&#224;y h&#244;m nay, m&#236;nh sẽ b&#224;y cho c&#225;c bạn một c&#225;ch c&#243; thể tạo chức năng responsive cho những video khi ta ch&#250;ng ta nh&#250;ng n&#243; v&#224;o web hay blog. [COLOR=&quot;#008000&quot;]Bước 1 : Lấy YouTube Embed Code[/COLOR] – V&#224;o Youtube. – T&#236;m Video m&#224; c&#225;c bạn muốn nh&#250;ng v&#224;o website hay blog của m&#236;nh. – Click v&#224;o Share &gt;&gt; Embed &gt;&gt; Nhấp chuột phải rồi copy HTML code. [COLOR=&quot;#008000&quot;]Bước 2 : Nh&#250;ng v&#224;o web[/COLOR] C&#225;c bạn d&#225;n đoạn code đ&#227; copy ở bước 1 v&#224;o bất k&#236; vị tr&#237; n&#224;o m&#224; c&#225;c bạn muốn hiển thị video tr&#234;n trang web của m&#236;nh. Đoạn code sẽ tương tự như thế n&#224;y :

Mã:

<iframe width="420" height="315" src="http://www.youtube.com/embed/6xisazZX9bA" frameborder="0" allowfullscreen></iframe>

[COLOR=&quot;#008000&quot;]Bước 3 : Tạo chức năng Responsive[/COLOR] Mẹo ở đ&#226;y l&#224; ch&#250;ng ta sẽ ch&#232;n th&#234;m một thẻ div bao quanh to&#224;n bộ đoạn code m&#224; ch&#250;ng ta vừa nh&#250;ng v&#224;o web.

Mã:

<div class="video-responsive"> <iframe width="420" height="315" src="http://www.youtube.com/embed/6xisazZX9bA" frameborder="0" allowfullscreen></iframe> </div>

[COLOR=&quot;#008000&quot;]Bước 4 : Ch&#232;n CSS[/COLOR] B&#226;y giờ l&#224; phần cuối c&#249;ng, c&#225;c bạn chỉ cần copy đoạn css b&#234;n dưới cho thẻ &lt;div&gt; m&#224; ch&#250;ng ta tạo ở bước 3.

Mã:

.video-responsive{ overflow:hidden; padding-bottom:56.25%; position:relative; height:0; } .video-responsive iframe{ left:0; top:0; height:100%; width:100%; position:absolute; }

B&#226;y giờ c&#225;c bạn c&#243; thể tự kiểm chứng bằng c&#225;ch thay đổi k&#237;ch thước m&#224;n h&#236;nh l&#224; c&#243; thể thấy được ngay kết quả. [COLOR=&quot;#FF0000&quot;]Ch&#250;c c&#225;c bạn th&#224;nh c&#244;ng ![/COLOR]

Bài viết rất có ích mình vẫn đang tìm hiểu về sản phẩm này, may mà có bài viết này. Cám ơn bạn!

Gửi bởi XuanNghia92

YouTube, Vimeo v&#224; những dịch vụ lưu trữ video kh&#225;c, thường c&#243; chức năng cho ph&#233;p người d&#249;ng nh&#250;ng video v&#224;o trong trang web hay blog của ch&#237;nh họ. Tuy nhi&#234;n Youtube, Vimeo hay những dịch vụ tương tự lại kh&#244;ng hỗ trợ chức năng responsive video khi ta nh&#250;ng v&#224;o. Tức l&#224; những video đ&#243; sẽ kh&#244;ng tự động thu nhỏ lại mỗi khi k&#237;ch thước m&#224;n h&#236;nh thay đổi. V&#224; điều n&#224;y thật sự sẽ g&#226;y kh&#243; khăn cho người d&#249;ng những thiết bị di động vốn dĩ c&#243; k&#237;ch thước hiển thị nhỏ hơn rất nhiều so với m&#225;y t&#237;nh để b&#224;n hay laptop.

Trong b&#224;i viết ngắn ngủi ng&#224;y h&#244;m nay, m&#236;nh sẽ b&#224;y cho c&#225;c bạn một c&#225;ch c&#243; thể tạo chức năng responsive cho những video khi ta ch&#250;ng ta nh&#250;ng n&#243; v&#224;o web hay blog. [COLOR=&quot;#008000&quot;]Bước 1 : Lấy YouTube Embed Code[/COLOR] – V&#224;o Youtube. – T&#236;m Video m&#224; c&#225;c bạn muốn nh&#250;ng v&#224;o website hay blog của m&#236;nh. – Click v&#224;o Share &gt;&gt; Embed &gt;&gt; Nhấp chuột phải rồi copy HTML code. [COLOR=&quot;#008000&quot;]Bước 2 : Nh&#250;ng v&#224;o web[/COLOR] C&#225;c bạn d&#225;n đoạn code đ&#227; copy ở bước 1 v&#224;o bất k&#236; vị tr&#237; n&#224;o m&#224; c&#225;c bạn muốn hiển thị video tr&#234;n trang web của m&#236;nh. Đoạn code sẽ tương tự như thế n&#224;y :

Mã:

<iframe width="420" height="315" src="http://www.youtube.com/embed/6xisazZX9bA" frameborder="0" allowfullscreen></iframe>

[COLOR=&quot;#008000&quot;]Bước 3 : Tạo chức năng Responsive[/COLOR] Mẹo ở đ&#226;y l&#224; ch&#250;ng ta sẽ ch&#232;n th&#234;m một thẻ div bao quanh to&#224;n bộ đoạn code m&#224; ch&#250;ng ta vừa nh&#250;ng v&#224;o web.

Mã:

<div class="video-responsive"> <iframe width="420" height="315" src="http://www.youtube.com/embed/6xisazZX9bA" frameborder="0" allowfullscreen></iframe> </div>

[COLOR=&quot;#008000&quot;]Bước 4 : Ch&#232;n CSS[/COLOR] B&#226;y giờ l&#224; phần cuối c&#249;ng, c&#225;c bạn chỉ cần copy đoạn css b&#234;n dưới cho thẻ &lt;div&gt; m&#224; ch&#250;ng ta tạo ở bước 3.

Mã:

.video-responsive{ overflow:hidden; padding-bottom:56.25%; position:relative; height:0; } .video-responsive iframe{ left:0; top:0; height:100%; width:100%; position:absolute; }

B&#226;y giờ c&#225;c bạn c&#243; thể tự kiểm chứng bằng c&#225;ch thay đổi k&#237;ch thước m&#224;n h&#236;nh l&#224; c&#243; thể thấy được ngay kết quả. [COLOR=&quot;#FF0000&quot;]Ch&#250;c c&#225;c bạn th&#224;nh c&#244;ng ![/COLOR]

Bài viết rất có ích mình vẫn đang tìm hiểu về lĩnh vực này, may mà có bài viết này. Cám ơn bạn!