I am trying to make my video a responsive one. The video has been positioned on top of an image (a tv screen) and it is important that it stays in the same place no matter how big the browser.
How would I go about making the video so it is
a) responsive
b) fixed in the position it is currently in.
The video has a height and a width so I am guessing it is harder to do.
Any advice would be appreciated.
Thanks
Reece
<div class="videocontainer">
<h1 class="videosheading"><strong>VIDEOS</strong></h1>
<div class="row">
<div class="col-xs-12 video-cell">
<img class="img-responsive" src="img/TVWALLTWO.jpg"/>
<video width="550" height="422" controls muted>
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
<source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video>
</div>
</div>
</div>
.video-cell {
position: relative;
}
.video-cell img {
width: 100%;
}
.video-cell video {
position: absolute;
top:6%;
bottom:10%;
left: 0;
right: 7%;
background-color: black;
border: #2F2925 10px solid;
border-radius: 10px;
margin: auto;
max-width: 100%;
}
Making a video responsive is pretty much the same as making a picture responsive.
Mainly, you have 2 solutions:
1) Using width and max-width properties in %s instead of pixels.
The video will scale within his limits (and of course within the window limits).
This is a very common solution - but nevertheless, I do NOT suggest you use it.
This might not look good on screens that are in different aspect-ratio than your video.
http://www.w3schools.com/css/css_rwd_videos.asp
2) The better solution to your problem is using the media attribute for your source, adjusting different videos for different screen sizes (media queries).
<video>
<source src="video-widescreens" media="screen and (min-width:800px)">
<source src="video-widescreens" media="screen and (min-width:800px)">
<source src="video-smallscreens.mp4" media="screen and (max-width:799px)">
<source src="video-smallscreens" media="screen and (max-width:799px)">
</video>
Related
I have a video on one of my html pages, and I love the dimensions for it on desktop, but on mobile its way too large, and is extending the screen.
I know this is fixable but I'm a bit confused in the solution I've looked a few up and am still confused.
<video width="900" height="450" autoplay loop controls >
<source src="images/Demo.mov" type="video/mp4">
Your browser does not support the video tag.
</video>
video{
max-width:900px;
width:100%;
}
<video height="450" autoplay loop controls >
<source src="images/Demo.mov" type="video/mp4">
Your browser does not support the video tag.
</video>
below CSS might help you.
video{
max-width:900px;
width:100%;
}
Remove the width and height attributes inside the HTML.
<video autoplay loop controls >
<source src="images/Demo.mov" type="video/mp4">
Your browser does not support the video tag.
</video>
Use CSS media queries to style the video frame. Example:
#media only screen and (max-width: 600px) {
video {
width: 900px;
height: 450px;
}
}
See the first line of the CSS code. There stands max-width: 600px. This is the maximal width of your screen. 600px are small devices.
Disclaimer: the CSS code is pseudo code. Play with the numbers to fit it into your screen and for mobile use percentage instead of pixels.
If you use width: 100%; it will be responsive to any screen size.
Using the CSS code multiple times with other screen sizes, you could support tablet or computer screens.
P.S.: Use mp4 files instead of mov files. It's more widely supported by the browsers.
I've to insert a vertical video on my website built using html css. the video must be in left side and it should be responsive. This code is displaying the vertical video on left side but on mobile it is not responsive. what I've to change here to make it responsive.
<div class="vert_video">
<video width="320" height="540" controls>
<source src="vertical_video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
When i change width to 100% it shows the video on entire screen which looks weird on desktop. help me to make this video responsive.
I think you should add vert_video class to video element.
<div>
<video class="vert_video" controls>
<source src="vertical_video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
Then, add media queries to your css file. In your media queries, you can set max-width or width, which would be useful for you.
/*this query will apply for the devices those have width smaller than 480px*/
#media (max-width: 480px) {
.vert_video {
width: 100%;
height: 100%;
}
}
.vert_video {
width: 75%;
height: 75%;
}
you can use this property in css to set your video's width and height based on device width and length
#media only screen and (max-width: 520px){
/* change the width and height of your video here using video property or the video containing class
it will update the width and height as soon the width of device will go less
than 520px, most of cell phones have width less than 520px(you can change
that too)
*/
}
I have a <video> tag in my HTML, that looks like this:
<video control>
<source src="[video_url].webm" type="video/webm">
<source src="[video_url].mp4" type="video/mp4">
<p>Your browser does not support this type of video</p>
</video>
This video is hosted on Cloudinary, and I'm doing an inline transform with the src to get a specific dimension (w_450,h_350).
The video by itself looks fine, however I have a media query where I shrink the video by 100px in both width and height to fit smaller screen sizes
#media screen and (max-width: 1000px) {
video { width: 350px; height: 250px }
}
And as you can see, the video container has a shadow that overflows past the width and height of the new container size. If I click play on the video, the box shadow persists.
How do I make the box-shadow for the controls fit the actual size of the container?
Rather than applying height width to the tag you should enclose it within a
<div>
<video control>
<source src="[video_url].webm" type="video/webm">
<source src="[video_url].mp4" type="video/mp4">
<p>Your browser does not support this type of video</p>
</video>
</div>
And then apply your css to the
#media screen and (max-width: 1000px)
{
div{ width: 350px; height: 250px }
video{ width: 100%; height: 100% }
}
What is the recommended/best way to set a video tag's width?
<video width="100%" ...></video>
Or using CSS:
video {
width: 100%
}
I would usually go the CSS route 100% of the time, but setting widths in elements like the canvas can be problematic.
Using CSS is better
because it improves code readability
If you are looking for making responsive video element, then you need to wrap video inside a div with width 100%.
Here it goes:
div.video {
max-width:100%;
height:auto;
display:block;
margin:0 auto;
}
.video {
width: /* More than element */;
}
I have tried the both the following link
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video_width_height
There is no difference it makes.
1. Inline
<!DOCTYPE html>
<html>
<body>
<video width="100%" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
2. CSS
<!DOCTYPE html>
<html>
<body>
<style> video{width : 100%; }</style>
<video height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
Better use the css.
It is good to style externally, not inline..
CSS
video {
width:100%;
}
You can use this code to make your video in full screen
video {
width: 100% !important;
height: auto !important;
}
To have a responsive html5 video tag you can go with this simple approach:
html
<video width="640" height="264" data-setup="{}" preload="auto" controls="" class="video-js vjs-default-skin" id="video_1">
<source type="video/mp4" src="video/src.mp4"></source>
<source type="video/webm" src="video/src.webm"></source>
<source type="video/ogg" src="video/src.ogv"></source>
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a target="_blank" href="http://videojs.com/html5-video-support/">supports HTML5 video</a></p>
</video>
width and height attributes are a simple aspect ratio. Override these values using css to keep your code as maintainable as possible.
css
video {
height: auto !important;
width: 100% !important;
}
Now your video will resize according to your container width.
You can use Javascript to dynamically set the height to 100% of the window and then center it using a negative left margin based on the ratio of video width to window width.
DEMO
var $video = $('video'),
$window = $(window);
$(window).resize(function(){
var height = $window.height();
$video.css('height', height);
var videoWidth = $video.width(),
windowWidth = $window.width(),
marginLeftAdjust = (windowWidth - videoWidth) / 2;
$video.css({
'height': height,
'marginLeft' : marginLeftAdjust
});
}).resize();
If I understand correctly, this should be as simple as setting the min-height and min-width to 100%. So for example:
#video {
position: fixed;
left: 0;
top: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
This may need to be adjusted for responsiveness.
Check out thisDEMO
Want to show a video in a bootstrap responsive site.
In my CSS file I defined the video tag width to be 100 % of the .span7 box and set the height to auto. Works very well on desktop when I change the width of the browser window. On iPhone it looks very well, too.
Only on iPad the video width is 100 % but height is only about 2 bootstrap rows. That's too small. Why that?
Why is the height so small on iPad in Safari mobile?
This is the trick I use for iPad:
<div class="video">
<canvas width="960" height="540"></canvas>
<video preload="none" width="960" height="540" controls poster="video.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</div>
CSS:
.video {
position: relative;
}
.video video,
.video canvas {
top: 0;
left: 0;
width: 100%;
max-width: 100%;
}
video {
height: 100% !important;
position: absolute;
}
Works like a charm including the preview image (poster).