Hướng dẫn css video - video css

Question

Nhúng các video vào các trang web sẽ làm nội dung thêm phong phú nhưng các bạn sẽ bị gặp vấn đề khi xem trang web này ở các màn hình có kích thước khác nhau như Destop, Tablet, SmartPhone, v.v. thì các Video này không tự thay đổi kích thước để phù hợp với kích thước màn hình. Tuy nhiên khi bạn nhúng một video từ Youtube vào trang web, nó đã có định độ rộng và độ cao, nên có thể bạn chạy tốt trên Destop nhưng lại bị tràn màn hình khi ở thiết bị moblile. Công nghệ Responsive-dịch ra tiếng việt là Web đáp ứng, mục đích để nội dung trên các trang web sẽ tương thích với các kích thước màn hình khác nhau. Bài này tôi sẽ hướng dẫn cách sử dụng CSS để nhúng được các Video Youtube Responsive, điều mà Youtube không tự động thực hiện được khi chúng ta copy mã nhúng từ Youtube đặt vào trang web của chúng ta.
Tuy nhiên khi bạn nhúng một video từ Youtube vào trang web, nó đã có định độ rộng và độ cao, nên có thể bạn chạy tốt trên Destop nhưng lại bị tràn màn hình khi ở thiết bị moblile.
Công nghệ Responsive-dịch ra tiếng việt là Web đáp ứng, mục đích để nội dung trên các trang web sẽ tương thích với các kích thước màn hình khác nhau.
Bài này tôi sẽ hướng dẫn cách sử dụng CSS để nhúng được các Video Youtube Responsive, điều mà Youtube không tự động thực hiện được khi chúng ta copy mã nhúng từ Youtube đặt vào trang web của chúng ta.

Nội dung chính Show

Cách thức thực hiện:
Kiểm tra kết quả
Cách thức thực hiện:
Kiểm tra kết quả
1) Thẻ trong HTML
Kiểm tra kết quả
1) Thẻ trong HTML
2) Các thuộc tính được sử dụng trong thẻ
2.1) Thuộc tính src
2.2) Thuộc tính autoplay
2.3) Thuộc tính controls
2.4) Thuộc tính loop
2.5) Thuộc tính muted
2.6) Thuộc tính preload
2.7) Thuộc tính poster
2.8) Thuộc tính width & height
- Lưu ý: Giá trị của thuộc tính poster có thể là đường dẫn tương đối hoặc đường dẫn tuyệt đối.

Nội dung

Cách thức thực hiện:
- CSS
- HTML
- Kiểm tra kết quả

Cách thức thực hiện:

CSS
HTML

Kiểm tra kết quả

CSS


.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML

 
 Nhúng các video vào các trang web sẽ làm nội dung thêm phong phú nhưng các bạn sẽ bị gặp vấn đề khi xem trang web này ở các màn hình có kích thước khác nhau như Destop, Tablet, SmartPhone, v.v. thì các Video này không tự thay đổi kích thước để phù hợp với kích thước màn hình. Tuy nhiên khi bạn nhúng một video từ Youtube vào trang web, nó đã có định độ rộng và độ cao, nên có thể bạn chạy tốt trên Destop nhưng lại bị tràn màn hình khi ở thiết bị moblile. Công nghệ Responsive-dịch ra tiếng việt là Web đáp ứng, mục đích để nội dung trên các trang web sẽ tương thích với các kích thước màn hình khác nhau. Bài này tôi sẽ hướng dẫn cách sử dụng CSS để nhúng được các Video Youtube Responsive, điều mà Youtube không tự động thực hiện được khi chúng ta copy mã nhúng từ Youtube đặt vào trang web của chúng ta.
 Tuy nhiên khi bạn nhúng một video từ Youtube vào trang web, nó đã có định độ rộng và độ cao, nên có thể bạn chạy tốt trên Destop nhưng lại bị tràn màn hình khi ở thiết bị moblile.
 Công nghệ
Responsive-dịch ra tiếng việt là Web đáp ứng, mục đích để nội dung trên các trang web sẽ tương thích với các kích thước màn hình khác nhau.
 Bài này tôi sẽ hướng dẫn cách sử dụng CSS để nhúng được các Video Youtube Responsive, điều mà Youtube không tự động thực hiện được khi chúng ta copy mã nhúng từ Youtube đặt vào trang web của chúng ta.
Nội dung chính
Cách thức thực hiện:
Kiểm tra kết quả
1) Thẻ trong HTML
2) Các thuộc tính được sử dụng trong thẻ 
2.1) Thuộc tính src
2.2) Thuộc tính autoplay
2.3) Thuộc tính controls
2.4) Thuộc tính loop
2.5) Thuộc tính muted
2.6) Thuộc tính preload
2.7) Thuộc tính poster
2.8) Thuộc tính width & height
3) Những định dạng video được hỗ trợ
Nội dung



Cách thức thực hiện:Kiểm tra kết quả
1) Thẻ trong HTML
Kiểm tra kết quả
Cách thức thực hiện:
Kiểm tra kết quả
1) Thẻ trong HTML
2) Các thuộc tính được sử dụng trong thẻ 
Kiểm tra kết quả

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
1) Thẻ trong HTML
1) Thẻ trong HTML


		  
		
1) Thẻ  trong HTML
2) Các thuộc tính được sử dụng trong thẻ  được dùng để tạo một "trình xem phim" cho trang web.
2.1) Thuộc tính src
2.2) Thuộc tính autoplay
2.3) Thuộc tính controls
2.4) Thuộc tính loop
2) Các thuộc tính được sử dụng trong thẻ 
2.1) Thuộc tính src
2.2) Thuộc tính autoplay

2.3) Thuộc tính controls 2.4) Thuộc tính loop
2.5) Thuộc tính muted 2.6) Thuộc tính preload
2.7) Thuộc tính poster 2.8) Thuộc tính width & height
"sau khi trang web được tải xong, trình xem phim sẽ tự động phát video"
3) Những định dạng video được hỗ trợ Nội dung
CSS HTML
Trước hết bạn cần đặt phần code nhúng video youtube trong thẻ   và chỉ định thuộc tính padding-bottom trong khoảng từ 50% đến 60%. Rồi tạo các CSS cho các thẻ con như iframe, object, embed với các thuộc tính độ rộng: 100%, độ cao: 100% height và posion: absolute. Điều này sẽ giúp các phần tử nhúng của video sẽ tự động co giãn theo kích thước màn hình.
Xem code CSS bên dưới. Kế tiếp, sửa code HTML và nhúng video vào giữa thẻ  như bên dưới:
Bây giờ chúng ta hãy kiểm tra thử kết quả xem Video của chúng ta đã hoạt động tốt trên cả Tablet, Desktop và Mobile hay chưa. - Thẻ  được dùng để tạo một "trình xem phim" cho trang web.
- Ví dụ: Bên dưới là một trình xem phim. - Để tạo một trình xem phim thì thẻ  cần phải được sử dụng kết hợp với thẻ  để xác định tập tin video mà bạn muốn phát.
2.1) Thuộc tính src
2.2) Thuộc tính autoplay



2.3) Thuộc tính controls
2.4) Thuộc tính loop
2.5) Thuộc tính muted
2.4) Thuộc tính loop
2.2) Thuộc tính autoplay
2.3) Thuộc tính controls
2.4) Thuộc tính loop
2.3) Thuộc tính controls
2.4) Thuộc tính loop
2.5) Thuộc tính muted2.4) Thuộc tính loop
2.4) Thuộc tính loop
2.5) Thuộc tính muted
2.4) Thuộc tính loop
2.5) Thuộc tính muted
2.6) Thuộc tính preload


</code></pre>0<p>2.4) Thuộc tính loop</p><div style="width:100%; margin:20px auto; display:block">
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid" 
     data-ad-client="ca-pub-4987931798153631"
     data-ad-slot="8587332220"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div></p><h3 id="2-6-thuoc-tinh-preload">2.6) Thuộc tính preload</h3><p>2.7) Thuộc tính poster</p><p>2.8) Thuộc tính width & height</p><p>3) Những định dạng video được hỗ trợ</p>
<table><tr><td>Nội dung</td><td>CSS</td></tr><tr><td>HTML</td><td>Trước hết bạn cần đặt phần code nhúng video youtube trong thẻ   và chỉ định thuộc tính padding-bottom trong khoảng từ 50% đến 60%.<br>(nó chỉ được tải khi người dùng bấm vào nút play)
</td></tr></table><hr><pre><code>
<div class="video-container"><iframe width="853" height="480" src="https://www.youtube.com/embed/z9Ul9ccDOqE" frameborder="0" allowfullscreen</iframe</div>
</code></pre>1<p>2.4) Thuộc tính loop</p><h3 id="2-7-thuoc-tinh-poster">2.7) Thuộc tính poster</h3><p>- Thuộc tính poster dùng để xác định đường dẫn đến một tập tin hình ảnh mà bạn muốn dùng để làm ảnh đại diện cho video trước khi phát.</p><hr><pre><code>
<div class="video-container"><iframe width="853" height="480" src="https://www.youtube.com/embed/z9Ul9ccDOqE" frameborder="0" allowfullscreen</iframe</div>
</code></pre>2<p>Xem ví dụ</p><p>- Lưu ý: Giá trị của thuộc tính poster có thể là đường dẫn tương đối hoặc đường dẫn tuyệt đối.</p><h3 id="2-8-thuoc-tinh-width-height">2.8) Thuộc tính width & height</h3><p>- Thuộc tính width & height dùng để xác định chiều rộng & chiều cao của trình xem phim.</p><hr><pre><code>
<div class="video-container"><iframe width="853" height="480" src="https://www.youtube.com/embed/z9Ul9ccDOqE" frameborder="0" allowfullscreen</iframe</div>
</code></pre>3<p>Xem ví dụ</p><h2 id="luu-y-gia-tri-cua-thuoc-tinh-poster-co-the-la-duong-dan-tuong-doi-hoac-duong-dan-tuyet-doi">- Lưu ý: Giá trị của thuộc tính poster có thể là đường dẫn tương đối hoặc đường dẫn tuyệt đối.</h2><p>2.8) Thuộc tính width & height</p>
<table><tr><th>- Thuộc tính width & height dùng để xác định chiều rộng & chiều cao của trình xem phim.</th><th>MIME-type</th></tr><tr><td>3) Những định dạng video được hỗ trợ</td><td>- Hiện nay có ba loại định dạng video phổ biến được hỗ trợ trên các trình duyệt: MP4, WebM, Ogg</td></tr><tr><td>Format</td><td>MP4 </td></tr><tr><td>video/mp4 </td><td>WebM </td></tr></table><p>video/webm </p>
<table><tr><th>Ogg </th><th>MP4</th><th>video/ogg </th><th>- Tuy nhiên, không phải tất cả các trình duyệt đều hỗ tợ hết ba loại định dạng video này.</th></tr><tr><td>Trình duyệt</td><td>WebM</td><td>WebM</td><td>WebM</td></tr><tr><td>Ogg</td><td>WebM</td><td>WebM</td><td>WebM</td></tr><tr><td>Ogg</td><td>WebM</td><td>WebM</td><td>WebM</td></tr><tr><td>Ogg</td><td>WebM</td><td>Ogg</td><td>Ogg</td></tr><tr><td>Chrome </td><td>WebM</td><td>Ogg</td><td>Ogg</td></tr></table><p>Chrome </p><hr>CÓ </p><div></div> <div></div></p></div>
                                    <div class="readmore_content_exists"><button id="readmore_content"><span class="arrow"><span></span></span>Đọc tiếp</button></div>
                                </td></tr></table>
																

															 <script async src="/dist/js/lazyhtml.min.js" crossorigin="anonymous"></script>
							 <div class="lazyhtml" data-lazyhtml>
								<script type="text/lazyhtml">
									<div class="youtubeVideo"><h3>Video liên quan</h3>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/mavDhuj-SJk?controls=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"allowfullscreen>


														
							
								
																  programming
																  css
																  CSS cho video
																  HTML5 video
																  The Tạo video HTML5
																  Video w3school
																
							
							
							
							
                                    
                                    
                                    
                                    
                             	
							
                            


 







Bài Viết Liên Quan










Xbox game pass ultimate là gì năm 2024



là ai
Hỏi Đáp
Là gì
Game
PC Game Pass
Xbox Cloud gaming









Đại dương nào lớn nhất trên trái đất năm 2024



mẹo hay
Khoa Học
Trái đất









Lỗi operation could not be completed error 0x709 năm 2024



mẹo hay









Chế độ đa nguyên chính trị là gì năm 2024



là ai
Hỏi Đáp
Là gì









Có nên mua máy hada crie vào dịp nào năm 2024



mẹo hay
Hỏi Đáp
Có nên
Công Nghệ
Máy









Sinh viên tiếng trung là gì năm 2024



là ai
Hỏi Đáp
Là gì
Học Tốt
Tiếng trung









Giá trị hàng hóa bao nhiêu thì phải thầu năm 2024



mẹo hay
Hỏi Đáp
Bao nhiêu
Cryto
Giá 
Luật đấu thầu
nghị định 63/2014/nđ-cp
thông tư 58/2024/tt-btc
quyết định 17/2024/qđ-ttg
Muasamcong









Ngày 19 tháng 8 là cung gì năm 2024



là ai









High school friends và college friends cái nào tốt hơn năm 2024



mẹo hay









Hóa đơn chứng từ hợp pháp theo quy định năm 2024



mẹo hay
nghị định 123/2024/nđ-cp.
Nghị định 123













Ban văn hóa xã hội thành phố hà nội năm 2024



mẹo hay









Giải sách bài tập toán lớp 3 tập 2 năm 2024



mẹo hay
Khỏe Đẹp
Bài tập
Học Tốt
Sách 









Biểu tượng của nước việt nam là con gì năm 2024



là ai









Bài tập thiết kế hệ thống thông tin năm 2024



mẹo hay
Khỏe Đẹp
Bài tập









Sua lỗi đăng video đang xử lí 0 năm 2024



mẹo hay









Năm cung bảo bình hợp với cung nào năm 2024



mẹo hay









Đội hình 4-1-2-1-2 trong top eleven năm 2024



mẹo hay
Top List
Top









Lanh-téc-na-xi-ông-na-lơ là gì năm 2024



là ai
Hỏi Đáp
Là gì









Bảo hiểm 2 chiều ô tô là gì năm 2024



là ai
Hỏi Đáp
Là gì









Biến trở chạy về bên nào thì sáng nhất năm 2024



mẹo hay
Biến trở













Quảng Cáo








Có thể bạn quan tâm




Hệ trục tọa độ oxy là gì năm 2024

1 ngày trước
. bởi
Horn-rimmedMajority





Bài tập giảm mỡ bụng tại nhà nam giới năm 2024

1 ngày trước
. bởi
LookingSewing





Giá vé galaxy nguyễn văn quá hôm nay năm 2024

1 ngày trước
. bởi
RomanticDeduction





Đề thi ngữ văn học kì 1 lớp 9 năm 2024

1 ngày trước
. bởi
ConsequentSeeder





Làm sao để bài đánh giá facebook lên top năm 2024

1 ngày trước
. bởi
HuskyComputing





Hạch toán doanh thu chuyển nhượng quyền sử dụng đất năm 2024

1 ngày trước
. bởi
SeismicBaker





Folic acid 800 mcg là thuốc gì năm 2024

1 ngày trước
. bởi
EnforcedSpecification





Miêu tả về trường trung cấp công nghiệp bình dương năm 2024

1 ngày trước
. bởi
PleasedPriesthood





Hạch toán tài sản cố định xe ô tô năm 2024

1 ngày trước
. bởi
LocalAnthropology





Bài tập trắc nghiệm về đường tròn và tiếp tuyến năm 2024

1 ngày trước
. bởi
ShortIllustrator








Toplist được quan tâm



#1

Top 9 tập bản đồ lớp 8 bài 31 2023
5 tháng trước



#2

Top 6 kết quả thi hsg đà nẵng 2022 2023
5 tháng trước



#3

Top 9 tủ nhựa đài loan 4 cánh 3d 2023
5 tháng trước



#4

Top 9 chất khí có thể làm mất màu dung dịch nước brom là: a. so2. b. co2. c. o2. d. hcl. 2023
5 tháng trước



#5

Top 8 tìm việc làm tiện, phay bảo q7 2023
5 tháng trước



#6

Top 3 tôi xuyên thành tiểu kiều the của lão đại phản 2 2023
5 tháng trước



#7

Top 9 đổi mới phong cách, thái độ phục vụ của cán bộ y tế hướng tới sự hài lòng của người bệnh 2023
5 tháng trước



#8

Top 2 bài the dục phát triển chung lớp 6 2022 2023
5 tháng trước



#9

Top 3 bài giảng vũ điệu sắc màu (lớp 4) 2023
5 tháng trước






Quảng cáo







Xem Nhiều




Camera điều khiển tren không gọi là gì năm 2024

4 ngày trước
. bởi
SquareBrunt





Ký hiệu ext trên tay cầm ps4 pro là gì năm 2024

2 ngày trước
. bởi
OverhangingIceberg





Nghĩa vụ cơ bản của hợp đồng là gì năm 2024

2 ngày trước
. bởi
Short-termGrandeur





Dùng ram như thế nào cho máy tính xem phim năm 2024

4 ngày trước
. bởi
DelightedWhereabouts





Qua tiêu hóa lipid sẽ được biến đổi thành gì năm 2024

6 ngày trước
. bởi
RabidContentment





Nhà hàng phố đêm 346 phạm văn đồng năm 2024

1 tuần trước
. bởi
UnregulatedIntersection





Bài 42 vật lí 9 sách bài tập năm 2024

1 tuần trước
. bởi
One-manReceptor





Anh không có font nền gọi là gì năm 2024

1 tuần trước
. bởi
Two-hourProcessing





Lỗi page fault in nonpaged area win 7 năm 2024

6 ngày trước
. bởi
ImplacableDriver





Bài tập định luật bôi lơ ma ri ốt năm 2024

2 ngày trước
. bởi
ClandestineMemory





 
Quảng cáo


























Chúng tôi

Giới thiệu
Liên hệ
Tuyển dụng
Quảng cáo





Điều khoản

Điều khoản hoạt động
Điều kiện tham gia
Quy định cookie





Trợ giúp

Hướng dẫn
Loại bỏ câu hỏi
Liên hệ





Mạng xã hội

 Facebook
 Twitter
 LinkedIn
 Instagram









  



Bản quyền © 2021 Xây Nhà Inc.