thẻ video để lấp đầy 100% div bất kể tỷ lệ

Tôi buộc phải có một thẻ video để lấp đầy 100% của một div:thẻ video để lấp đầy 100% div bất kể tỷ lệ

a) nó không cần phải giữ cho tỷ lệ (nếu không chúng ta cần phải sử dụng tràn: không có);

b) điền vào một div chứ không phải toàn bộ nền;

c) đó sẽ là điểm cộng để chịu trách nhiệm. Bây giờ nó là miễn là bạn lại kích thước cửa sổ theo đường chéo. Giữ chiều cao và định lại kích thước theo chiều ngang cắt video.

Tôi đã thử hàng tá nếu không phải hàng trăm giải pháp thay thế và tất cả đều giữ tỷ lệ video ban đầu.

nó hoạt động trong fidlle .... có lẽ vì màn hình nhỏ, có lẽ vì fiddle là một trình duyệt tốt hơn ...

<body> 
<div class="wrapper"> 
    <div class="header"> 
    ..... 
    </div> 
    <div class="out-video"> 
     <video autoplay loop poster="mel.jpg" id="bgvid" width="100%" height="100%"> 
      <source src="http://www.mysite.braaasil.com/video/mel.webm" type="video/webm"> 
      <source src="http://www.mysite.braaasil.com/video/mel.mp4" type="video/mp4"> 
     </video> 
    </div> 
</div>

Các trang web là here nhưng khi tôi thử giải pháp, nó sẽ thay đổi ... Có một thanh bên phải và bên trái trống. Tôi muốn video lấp đầy toàn bộ chiều rộng. Khi nó bao gồm div, thay đổi chiều cao và video không hiển thị đầy đủ. Tôi muốn một cái gì đó giống như kích thước nền 100% 100% kéo dài hình ảnh đến cuối div, nhưng nó không hoạt động cho video.

Cảm ơn bạn đã đề xuất trước.

PS. Có vẻ như gia đình android không phát video!

Nguồn

2014-04-04 user2060451

Phiên bản webm dường như bị mất tích. Có lẽ bạn cần phải đặt quyền cho định dạng đó trên máy chủ của bạn. Tuy nhiên, nó không rõ ràng yêu cầu của bạn là gì. –

phiên bản web không hoạt động? – user2060451

Liên kết đến nó cung cấp cho 404. Điều đó có thể do máy chủ không được đặt để cho phép loại tệp đó, mà bạn có thể dễ dàng sửa bằng một dòng trong tệp .htaccess của mình. –

Bạn có thể sử dụng giải pháp như this one. Tỷ lệ không thay đổi, nhưng bạn có thể mất phần bên phải của video.

video#bgvid { 
    position: absolute; 
    z-index: 0; 
    background: url(mel.jpg) no-repeat; 
    background-size: 100% 100%; 
    top: 0px; 
    left: 0px; /* fixed to left. Replace it by right if you want.*/ 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
}

Video sẽ được sửa ở góc trên cùng bên trái. Nếu bạn muốn cải thiện nó, tôi nghĩ bạn sẽ cần một số JavaScript.

Edit:

Chỉ cần một tìm một giải pháp với JQuery người có thể phù hợp với nhu cầu của bạn: simulate background-size:cover on <video> or <img>

Demo

Nguồn

2014-04-04 22:48:30 aloisdg

Cảm ơn bạn. Giải pháp Jquery dường như thêm tiêu đề vào khung nhìn nên sẽ có thanh cuộn, có thể chấp nhận được. Tôi đã cố gắng để không có thanh cuộn, div đầy đủ dưới (chiều rộng: 100% và chiều cao: 85% của chế độ xem). Vấn đề là video không co giãn như hình ảnh ... nó sẽ ghi đè lên ... quan trọng .... và mọi thứ khác. thật dễ dàng để có video đầy đủ với các bảng bên trống, div đầy đủ với thanh cuộn hoặc ẩn tràn. Thay đổi tỷ lệ của video để điền div và có một video đầy đủ là một cái gì đó. – user2060451

Điều này làm việc cho tôi, cảm ơn! –

thẻ video để lấp đầy 100% div bất kể tỷ lệ

Trả lời

Các vấn đề liên quan