Выравнивание изображений на ту же высоту, что и видео - CSS? - PullRequest
Новая
       0

Выравнивание изображений на ту же высоту, что и видео - CSS?

0 голосов
/ 10 апреля 2020

При воспроизведении видео оно может быть в альбомной или портретной ориентации. У меня есть 2 изображения imgfeatured1 и imgfeatured2, которые появляются слева и справа от видео соответственно. Я получу sh этих изображений для автоматической настройки на ту же высоту, что и воспроизводимое видео. 

<div id="streaming">
    <video playsinline ID="videoToPlay" poster="https://www.example.co.uk/files/images/videoPoster.jpg" runat="server"  autoplay preload class="videosize" controls>
        <source src="vid1.webm" type='video/webm;codecs="vp8, opus"'/> 
        <source src="vid2.mp4" type='video/mp4;codecs="avc1.4D401E, mp4a.40.2"'/>
    <source src="video/video.mov" type="video/mov"></source>
    </video>

    <asp:Image ID="imgFeatured1" alt="Featured 1" imageUrl="https://www.example.co.uk/files/images/icons/featured1.png" class="videologo" runat="server" />

    <asp:Image ID="imgFeatured2" alt="Featured 2" imageUrl="https://www.example.co.uk/files/images/icons/featured2.png" class="videologoright" runat="server" />


</div>

CSS пока .. 

.videologo {
  position: absolute;
  left: 5px;
}

.videologoright {
  position: absolute;
  right: 5px;
}

1 Ответ

0 голосов
/ 10 апреля 2020

если вы хотите, чтобы он был установлен c в зависимости от того, что загружено по запросу, вам нужно использовать javascript, чтобы получить и установить высоту на изображениях.

, если вы хотите, чтобы изображения были на каждой стороне видео вам нужно изменить порядок html, если вы хотите следовать рекомендациям.

Javascript версия:

Получить высоту видео и установить эта высота изображения, а ширина = авто 

  var imageOne = document.getElementById("imgFeatured1");
  var imageTwo = document.getElementById("imgFeatured2");
  var vid = document.getElementById("videoToPlay");

  imageOne.style.height = vid.offsetHeight +"px";
  imageTwo.style.height = vid.offsetHeight + "px";
  
    console.log(vid.offsetHeight);
  console.log(imageTwo.style.height);
#streaming {
  display: flex;
}

body {
  background: #333;
}
<body>



<div id="streaming">


  <img id="imgFeatured1" alt="Featured 1"
  src="https://betterstudio.com/wp-content/uploads/2019/05/1-1-instagram-1024x1024.jpg"
  class="videologo" runat="server" />

  <div id="VidWrapper">
    <video playsinline id="videoToPlay" runat="server"  autoplay preload class="videosize" controls>
        <source src="vid1.webm" type='video/webm;codecs="vp8, opus"'/>
        <source src="vid2.mp4" type='video/mp4;codecs="avc1.4D401E, mp4a.40.2"'/>
    <source src="video/video.mov" type="video/mov"></source>
    </video>
  </div>

    <img id="imgFeatured2" alt="Featured 2"
    src="https://betterstudio.com/wp-content/uploads/2019/05/1-1-instagram-1024x1024.jpg"
     class="videologoright" runat="server" />


</div>

</body>

CSS версия

Установить одинаковые значения img и высоты видео и автоматически c ширина 

#streaming {
  display: flex;
}

body {
  background: #333;
}

img, video{
  
  height: 25vh;
  width: auto;
}
<body>



<div id="streaming">


  <img id="imgFeatured1" alt="Featured 1"
  src="https://betterstudio.com/wp-content/uploads/2019/05/1-1-instagram-1024x1024.jpg"
  class="videologo" runat="server" />

  <div id="VidWrapper">
    <video playsinline id="videoToPlay" runat="server"  autoplay preload class="videosize" controls>
        <source src="vid1.webm" type='video/webm;codecs="vp8, opus"'/>
        <source src="vid2.mp4" type='video/mp4;codecs="avc1.4D401E, mp4a.40.2"'/>
    <source src="video/video.mov" type="video/mov"></source>
    </video>
  </div>

    <img id="imgFeatured2" alt="Featured 2"
    src="https://betterstudio.com/wp-content/uploads/2019/05/1-1-instagram-1024x1024.jpg"
     class="videologoright" runat="server" />


</div>

</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...