CODEWITHSUNDEEP
ioshtmlvideosafariresponsive-design
user2642236
user2642236

Reputation: 1

Responsive HTML5 Video - Sizing in iOS

we are having trouble displaying Responsive HTML5 video and getting the scale right;

On desktop browsers, the scale is fine - with the video and its poster image scaling perfectly. However on iPhone Safari, the video does not full the width, leaving a black 'border/padding' around.

The CSS;

.hero-video {
    /* The Container */
height: 338px;
width: 66.6%;
}
.hero-video video {
height: auto;
width: 100%;
}

The HTML

<div class="hero-video">
    <video id="intro-video" controls preload="auto" poster="img/trigger-intro.png" width="auto" height="auto">
    <source src="media/intro.mp4" type='video/mp4' />
    <source src="media/intro.webm" type='video/webm' />
        Your browser does not support this video.
    </video>
</div>

Upvotes: 0

Views: 2413

Answers (1)

lupoll88
lupoll88

Reputation: 159

THIS WORKS FOR ME.

I am pretty sure you can further change and clean the HTML Markup and CSS Rules but so far this works on iPhone, Android and Kindle Fire Devices.

For the Video HTML Markup I am using this.

<video autoplay="autoplay" id="background" loop="loop" muted="" poster="solar.jpg" data-autoplay="" playsinline="" height="750" width="1600">
<source src="solar5.mp4" type="video/mp4">
</video>

For the CSS I am using this.

#background {
position: relative;
min-width: 100%;
min-height: 100%;
width: 100%;
height: 100%;
z-index: -100;
-webkit-transform: translateX(0%) translateY(-20%);
transform: translateX(0%) translateY(-20%);
background: url("solar.jpg") no-repeat;
background-size: cover;
opacity: 1;
}
.video {
position:relative;
padding-bottom:44.25%;
padding-top:30px;
height:0;
overflow:hidden;
}

Upvotes: 1

Related Questions