Trying to create a corner radius video using a container.
Works great on any browser on desktop, and on mobile video is overflow the container.
.videoC {
width: 70vw;
height: auto;
margin-top: 2%;
margin-left: calc(15vw - 4px);
border-radius: 10vw;
border-style: solid;
border-color: white;
border-width: 8px;
overflow: hidden !important;
}
.video {
width: 100%;
height: auto;
object-fit: contain;
}
<div class="videoC">
<video class="video" loop="loop" muted autoplay defaultMuted playsinline oncontextmenu="return false;" src="xxx"></video>
</div>
on mobile iOS safari, the video corners overflow.
Turns out to be a Safari bug, solution, is it add this to the parent :
transform: translate3d(0, 0, 0);
and it worked.
you need to create a mobile version of your site.
you can use:
#media only screen and (max-width: 600px){
//
}
where:
#media is the css rule of css--
only screen and() is for set a "limit" of your rule
--max-width if for set the maximum width for your rule
Related
I have a video that fits in a container and has a width of 100% and a fixed height of 750px. The video has been set to object-fit: fill, and this works perfectly on all browser apart from..... you guessed it IE! I understand that object-fit is not supported in IE and wonder if anyone knows a workaround?
#mainContainer {
width: 100%;
height: 750px;
border-bottom: solid 4px #9B51E0;
position: relative;
}
#mainVideo {
width: 100%;
height: 750px;
object-fit: fill;
position: absolute;
opacity: 0.85;
}
<div id="mainContainer">
<video id="mainVideo" autoplay loop>
<source src="video.mp4">
</video>
</div>
Not surprising at all ;-) IE doesn't support object-fit property, but there are polyfills for that.
I always use this one: https://github.com/bfred-it/object-fit-images
EDIT:
And for videos
https://github.com/constancecchen/object-fit-polyfill
Im having trouble getting rid of what it appears to be a margin error?...i've already tried setting margin and padding values as 0 but i keep getting that line, should i downsize the video or something?
I inserted the background video on a div tag. Is the video just out of place?
/* Default to hide the video on all devices */
#video{display:none}
/* Default to display the image on all devices */
#videosubstitute{display:block;width:auto;height:100%;}
html, body {
height: 100%;
margin: 0;
}
/*START VIDEO
==================================================*/
#fullScreenDiv{
width:100vh;
min-height: 100vh;
/* Set the height to match that of the viewport. */
height: 100vh;
width: auto;
padding:0!important;
margin: 0!important;
background-color: black;
position: relative;
}
#video{
width: 100vw;
height: auto;
object-fit: cover;
left: 0px;
top: 0px;
z-index: 1;
volume: .02;
}
#media (min-aspect-ratio: 16/9) {
#video{
height: 150%;
top: -100%;
}
#videosubstitute{
display:block;
width: 100%;
height: auto;}
}
#media (max-aspect-ratio: 16/9) {
#video {
width: 150%;
left: -100%;
}
#videosubstitute{display:block;width:auto;height:100%;}
}
/*if there is 992 pixels or more, then display the video but hide the image*/
#media only screen and (min-width : 992px) {
#video{display:block;}
#videosubstitute{display:none}
}
/* The container for our text and stuff */
#messageBox{
position: absolute; top: 0; left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height:100%;
}
/*END VIDEO
==================================================*/
<div id="fullScreenDiv" class="table-cell">
<img src="https://www.imi21.com/wp-content/uploads/2016/11/t12.jpg" id="videosubstitute" alt="Full screen background video"></img>
<div id="videoDiv">
<video preload="preload" id="video" autoplay="autoplay" loop="loop">
<!-- Note: Replacing the following sources that are local:
<source src="img/mc10.webm" type="video/webm"></source>
<source src="img/mc10.mp4" type="video/mp4"></source> -->
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"></source>
</video>
</div>
</div>
This line seems off:
width:100vh;
vh means percent of the screen height. Probably a bad idea to use that as width.
Are you really sure you want the video to be cut off at the sides of the screen? Wouldn't it be better to have a black background and let the video fill the available space without stretching? E.g. fill: contain
I added youtube video in background but still it's not in full screen.
In left side and right side I'm still getting black background.
Here is my code:
<section class="banner-video">
<div class="banner-video-inner">
<iframe height="100%" width="100%" src="https://www.youtube.com/embed/<?php the_field('banner_video_link');?>?autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
</section>
.banner-video{position: relative; z-index: 0; width:100%; height:650px;}
.banner-video-inner{ position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none; z-index: 2;}
I used the_field using advance custom field plugin.
so can anyone tell me how to show video in full screen and remove that left and right side black background ??
Apply video to video tag and add CSS from below code:
body {
margin: 0;
background: #000;
}
video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background-size: cover;
}
<video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" playsinline autoplay muted loop>
<source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm">
<source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4">
</video>
.banner-video{position: relative; z-index: 0; width:100%; height:759px;}
#media only screen and (min-width:1400px){
.banner-video{height:843px;}
}
#media only screen and (min-width:1520px){
.banner-video{height:948px;}
}
#media only screen and (max-width:1199px){
.banner-video {height:576px;}
}
#media only screen and (max-width: 992px){
.banner-video {height:432px;}
}
#media only screen and (max-width: 640px){
.banner-video {height:318px;}
}
#media only screen and (max-width: 400px){
.banner-video {height: 180px;}
}
Finally This Works for me. Got the video in full screen.
I have a video in my html that I ideally do not want to play on tablet & mobile device browsers, just desktops. I've come across this site "https://www.myprovence.fr" that mirrors this exactly.
As you can see on the landing page they have a video in the header that when scaled down to a specific breaking point, displays an image (the background image I'm guessing), this is not such a big feat. However, I loaded this site on mobile safari in the iPad Pro simulator from Xcode, & it too instead of showing the actual video, has the image:
As we know, the iPad Pro screen size is well beyond 2000px, so i doubt a #media screen method was used. so how did they create this effect where the video only plays on desktop browsers?
Here is my html:
<div class="second-section">
<video class="rocky" autoplay="true" loop>
<source src="rocky_2.mp4" type="video/mp4">
<source src="rocky_2.webm" type="video/webm">
</video>
<div class="overlay"></div>
</div>
and my css:
.second-section {
position: relative;
height: 100vh;
background-color: #CD9B9B;
background-position: center;
background-size: cover;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-shadow: 0 1px 3px rgba(0,0,0,.8);
text-align: center;
overflow: hidden;
}
.rocky {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
background: transparent;
object-fit: contain;
}
any solutions?
So it seems i've been able to target desktop browsers through a media query based on resolution not screen size. Here is the query:
#media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min-resolution:144dpi) {
.rocky {
display: none;
}
}
by doing this, the video doesn't play on iPads/iPhone browsers but still does on desktop browsers. To be honest I can't fully wrap my head around the pro's and con's of using this method, so if someone can provide input your more than welcome :)
I am using the video HTML5 tag on a responsive website. I set the height and width to 100% and it works fine except in the mobile version where it's destroying the layout.
URL: omob-2.myshopify.com
<div style="height: 100%; width: 100%;">
<video width="100%" height="100%" autoplay>
<source src="intro_12_07_14.mp4" type="video/mp4">
</video>
</div>
Any ideas?
You can use both the max-width property or object-fit property to achieve this. See references: Using the object-fit property and Using the max-width property with fill-available
/* Using fill-available on the max-width property */
/* A box you would like to place the video in*/
.wrapper {
width: 600px
height: 300px;
}
/* The video */
.wrapper_video > video {
width: 100%;
max-width: -webkit-fill-available;
max-width: fill-available;
}
/* The object-fit property defines how an element responds to the height
and width of its content box.*/
/* A box you would like to place the video in*/
.wrapper {
width: 600px
height: 300px;
}
/* The video */
.wrapper_video > video {
width: 100%;
height: 100%;
object-fit: cover;
}
On devices that don't support the video tag you would show a image instead. There is a answer for this here How can I display an image if browser does not support HTML5's <video> tag
Edit: set the width and height in the css styles instead of the video tag. Set the width only, so to keep dimensional proportion, like this.
video {
width: 100%;
height: auto !important;
}
Use the CSS3 transform translate(-50%, -50%) to make the video in the center of the page:
Html Code
<div class="video-container">
<video autoplay loop="true" width="1280" height="720">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</div>
CSS Code
.video-container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.video-container video {
/* Make video to at least 100% wide and tall */
min-width: 100%;
min-height: 100%;
/* Setting width & height to auto prevents the browser from stretching or squishing the video */
width: auto;
height: auto;
/* Center the video */
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
body {
background: #000;
color: #fff;
font-family: 'Oxygen', sans-serif;
}
See here the demo.