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

Xem bài viết chưa trả lời | Xem chủ đề đang hoạt động

Trang chủ » Kiến thức lập trình » HTML / CSS / JavaScript

Thời gian được tính theo giờ UTC + 7 Giờ

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

Các điều hành viên: Admin, Mod, SMod

Bạn đang xem trang 1 / 1 trang

[ 2 bài viết ]

Xem bản in | Gửi Email giới thiệu

Chủ đề trước | Chủ đề kế tiếp

Người gửi

Nội dung

nghiammo1992

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

Đã gửi: 19/12/2016 23:48

☀️2/30☀️

Ngày tham gia: 08/03/2012 10:56
Bài viết: 15
Đến từ: Hà Giang
Thiết bị: Nokia N96
Số điện thoại: 0367790762

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.

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

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

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.

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

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 !

_________________
Diễn đàn chia sẻ kiến thức máy tính:
KETNOI123.COM

Ấn hiện ra để xem chữ ký của mình:

Đầu trang

Bạn đang xem trang 1 / 1 trang

[ 2 bài viết ]

Trang chủ » Kiến thức lập trình » HTML / CSS / JavaScript

Thời gian được tính theo giờ UTC + 7 Giờ

Chủ đề		Người gửi	Trả lời	Xem	Bài viết mới nhất
Chủ đề tương tự
	[Share Code] Code Xem Tv Trực Tuyến Bằng Html	Tamhoangdk	0	2580	13/11/2013 22:40 Tamhoangdk
	Code CSS và Code ngày giờ,nhận dạng trình duyệt mobile	Vuonghh1998	2	1798	22/01/2016 18:16 Vuonghh1998
	Code chuyển hướng trang bằng PHP, HTML, JavaScript, htaccess	nghiammo1992	8	2348	21/08/2016 20:25 vipmathuah
	[J2ME] – hướng dẫn tạo màn hình load game	GmGmNewGate	2	1373	03/07/2013 17:35 KotexDamMau
	[Share] Code trang trí giáng sinh cho website cực đẹp	nghiammo1992	0	1645	16/12/2013 00:40 nghiammo1992
	[Share] Code Google +1, Like Facebook cho website	nghiammo1992	2	1577	07/02/2014 20:41 Tamhoangdk
	Xin code UP.MWAP.BIZ hiện tại [ Chuyển đến trang: 1, 2 ]	~~Nhoxsock0000~~	12	3577	21/07/2014 11:22 Vipgun98s2
	[Share] Code lấy kết quả xổ số	nghiammo1992	2	2307	11/05/2014 18:48 ~~Dmlim~~
	[XIN]Code chèn tag vào bài viết cho wapmaster	SoKhanhLaAnh	7	2062	05/05/2015 17:35 Tamhoangdk
	[Code C for Newbie] Bài 1 Ngôn ngữ lập trình và phương pháp lập trình	KangBee1	3	1868	15/10/2015 15:30 GiapDong

Ai đang trực tuyến?

Đang xem chuyên mục này: Không có thành viên nào đang trực tuyến và 1 khách

Bạn không thể tạo chủ đề mới trong chuyên mục này.
Bạn không thể trả lời bài viết trong chuyên mục này.
Bạn không thể sửa những bài viết của mình trong chuyên mục này.
Bạn không thể xoá những bài viết của mình trong chuyên mục này.

Chuyển đến:

CHIASE123.COM - Diễn đàn chia sẻ kiến thức

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

Ai đang trực tuyến?