Chèn (Nhúng) Video vào website giữ đúng tỉ lệ

Chèn (Nhúng) Video vào website giữ đúng tỉ lệ

css
Khi chèn video vào website, các theme có thể đã có css cài đặt cho video luôn giữ đúng tỉ lệ khi website hiển thị ở những màn hình khác nhau. Tuy nhiên, nếu bạn dùng mã nhúng <iframe ></iframe> thì bạn sẽ phải quy định chiều cao và chiều ngang cho khung video (<iframe src="url" width="chieu-ngang" height="chieu-cao"></iframe>). Như vậy, khi áp dụng responsive cho thuộc tính này (thu nhỏ màn hình thiết bị và chiều ngang của video bị thu nhỏ để không vỡ khung website), vô hình chung thay đổi tỉ lệ giữa chiều cao và chiều ngang của khung video (vì khi màn hình thu nhỏ, chiều cao khung video không thay đổi). Vậy giải quyết như thế nào? Chèn (Nhúng) Video vào website giữ đúng tỉ…
Read More
Chèn ảnh nền Full màn hình với Html và CSS

Chèn ảnh nền Full màn hình với Html và CSS

css, Html
Đặt ảnh Background full màn hình Đối với một số bạn đã biết về css thì sẽ biết, khá đơn giản để đặt hình nền cho một đối tượng bất kì, chỉ cần sử dụng thuộc tính background cho thẻ đó là được. Ví dụ đặt ảnh cho toàn trang body {   background: url(địa chỉ ảnh); } nhưng như đoạn mã trên thì ảnh sẻ chỉ nằm ở một góc mà chứ không tràn ra toàn trang web, một số bạn thì thường cho thêm thuộc tính repeat vào nữa thì ảnh sẽ lặp lại the chiều ngăng chiều dọc gì đó, một số bạn lại kiếm một ảnh cỡ đại bự để chèn vào. Nhưng kiểu nào cũng vậy mình thấy hầu hết nó cũng thấy nó xấu…
Read More
Css căn chỉnh đối tượng vào giữa

Css căn chỉnh đối tượng vào giữa

css
Mặc dù rất đơn giản nhưng nhiều người vẫn thắc mắc và tìm kiếm. Css căn chỉnh đối tượng vào giữa Đơn giản, bạn có đoạn css sau: .cangiua {margin-right: auto; margin-left: auto;} .cangiua là tên của class css cần căn chỉnh. Bạn có thể căn chỉnh bất cứ đối tượng nào, kể cả hình ảnh. Ví dụ html bạn viết là: <div class="cangiua"> Nội dung căn giữa </div> Đối với hình ảnh, ví dụ: <img src="link-anh" class="cangiua"> Hãy áp dụng đoạn css trên để  Nội dung căn giữa nằm giữa vùng không gian bạn cần căn chỉnh. Đơn giản vậy thôi  
Read More
Css chỉnh video vừa với khung bài viết (Responsive Video)

Css chỉnh video vừa với khung bài viết (Responsive Video)

css
Bạn chèn video từ youtube vào chẳng hạn, nhưng chẳng may  web bạn không có sẵn code để co dãn khung video co vừa khung bài viết (Responsive). Hậu quả là khung video bị tràn ra ngoài khung  website rất xấu xí và khó chịu. Điều này cũng ảnh hưởng đến khả năng xem video của website khi truy cập bằng điện thoại hoặc các thiết bị màn hình kích thước nhỏ. Css chỉnh video vừa với khung bài viết (Responsive Video) Để khắc phục điều này chỉ  cần đơn giảm một đoạn css .video { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video iframe, .video object, .video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } Tất nhiên khi chèn video…
Read More