एक वीडियो टैग के अंदर लंबवत केंद्रित वीडियो

Question

आप एक वीडियो टैग के अंदर वीडियो को लंबवत कैसे केंद्रित करते हैं? वर्तमान में वीडियो फ्लश टॉप है और नीचे कट ऑफ हो रहा है। मैं वीडियो कंटेनर के बीच में वीडियो के बीच के लिए क्या करना चाहता हूं। वीडियो की ऊंचाई अलग-अलग होगी क्योंकि यह उत्तरदायी है क्योंकि ब्राउजर छोटा हो जाता है, इसलिए वीडियो करता है। यहां मेरे कोड है:

एचटीएमएल

<div id="video-wrap"> 
    <video preload="auto" autoplay loop muted> 
     <source type="video/mp4" src="video.mp4"> 
    </video> 
</div> 

सीएसएस:

#video-wrap { 
    width: 100%; 
    height: 400px; 
    overflow: hidden; 
} 

Answer 1

इन तीन लाइनों करना चाहिए:

video{ 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

मुझे पता है अगर यह काम करता है :)

चलो