Показывать видео-тег, максимизированный и центрированный в div

Я хочу показать видео по тегу html5 видео в фиксированном div. Я максимизирую его, используя min-height и max-height. Но я также хочу, чтобы это было сосредоточено.

<div class="fixed-width-height">
    <video style="min-width:100%; min-height:100%;" controls autoplay>
        <source src="myvid.mpg" type="video/mp4">
        Your browser does not support the video tag
    </video>
</div>

Прямо сейчас, div всегда показывает верхнюю/левую часть видео в зависимости от размера div. Лучше всего всегда показывать центр.

UPDATE: Теперь тег видео по центру, отличная работа jbutler483, но есть проблема с размером видео в зависимости от размера рамки или соотношения видео или размера. Видео не охватывает всю область, или центрирование не выполняется. Вот отрезанный, который соответствует потребностям на коробке 400x400, но терпит неудачу при 1000x200. http://jsfiddle.net/cremers/7Lgfyg1d/6/

UPDATE: Нашли рабочие решения для не IE: object-fit: cover; object-position:center; Но я хотел бы иметь полное рабочее решение.

UPDATE: Polyfill должен предоставить желаемую функцию, я проверю это в тегах видео в эти дни, от спасибо до Филиппа Дерновой, ОБНОВЛЕНИЕ: Прошу прощения, но я не получил этого.

Ответ 1

Для достижения этой цели вы можете использовать комбинацию позиционирования и перевода:

.fixed-width-height {
  position: relative;
}
.fixed-width-height video {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

<div class="fixed-width-height">
  <video style="min-width:100%; min-height:100%;" controls autoplay>
    <source src="myvid.mpg" type="video/mp4">
      Your browser does not support the video tag
  </video>
</div>

Ответ 2

Я не уверен, понял ли я, что вы хотите. Для тега видео я использовал объект-содержание и позицию объекта для обработки большинства требований к макету. С помощью jsfiddle, который вы дали, попробуйте изменить класс "child" на:

.child{
    position: relative;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
}

Это сделает заливку видео на всю ширину или полную высоту в зависимости от соотношения h/w. Если вы хотите, чтобы видео заполнило весь div, часть его была переполнена, просто измените привязку объекта к обложке. Надеюсь, это поможет.

Ответ 3

добавьте этот стиль в видео:

position: absolute;
min-height: 50%;
min-width: 50%; 
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;

и этот стиль в контейнер div: position:relative;

http://jsfiddle.net/4k0bpek4/2/

Ответ 4

Я думаю, что свойство "flex" является лучшим для этой ситуации. Вот код:

document.querySelector('body').onload = function() {
  document.querySelector('body').style.height = window.innerHeight + 'px';
  window.onresize = function () {
    document.querySelector('body').style.height = window.innerHeight + 'px';
  }
}

body {
  margin: 0;
  min-height: 100%;
}

.fixed-width-height {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
}

video {
  width: 100%; height: 100%
}

<div class="fixed-width-height">
  <video controls autoplay>
    <source src="myvid.mpg" type="video/mp4">
      Your browser does not support the video tag
  </video>
</div>

Ответ 5

Я думаю, что это то, что вы ищете..

    .fixed-width-height {
        margin: 3px 0px 8px 10px;
        position: relative;
        width: 100%;
    }
    .child {
        width: 100%;
        height: 100%;
        position: relative;
        border: 1px #ef7f1b solid;
        padding: 6px;
    }

<div class="fixed-width-height">
<video class="child" controls="" autoplay="">
    <source src="http://beginwithsoftware.com/free-hd-720p-1080p-mp4-video-downloads/video/I_LOVE_YOU_H264_720P_23.976_BeginWithSoftware.com.mp4" type="video/mp4">Your browser does not support the video tag.</video>

http://jsfiddle.net/4cbnj0tc/

Ответ 6

HTML

<html>
<head>
 <link rel="stylesheet" href="style1.css" type="text/css" /> 
</head>
<div class="fixed-width-height">
  <video style="min-width:100%; min-height:100%;" controls autoplay>
    <source src="video.mp4" type="video/mp4">
      Browser Not Supported
  </video>
</div>
</body>
</html>

CSS

.fixed-width-height {
  position: relative;
}
.fixed-width-height video {  
    position: relative;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;

}

Ответ 7

подумайте, что это вам поможет..: D

#myplayer {
	position:fixed;
	top:25%;
	left:25%;
	bottom:25%;
	right:25%;
	display:block;
	background:#000;
}
#defaultplayer {
	position:absolute;
	height:99%;
	width:99%;
	background:#000;
}

<div id="myplayer"><video id="defaultplayer" src="your url" controls></video></div>