David Schure
asked on
Video Not Being Responsive
I have a video on a website. The problem that I have that it's not resizing to fit phones, tablets, etc,
http://www.mediascrubber.com
http://www.mediascrubber.com
margin-right: auto;
margin-left: auto;
display:block;
<video width="1000" controls>
<source src="media/Permission.mp4" type="video/mp4">
<source src="media/Permission.mp4" type="video/ogg">
Your browser does not support the video tag.
</video>
ASKER
Thank you but this is over my head. This is suppose to work....
but doesn't....
video {
margin-right: auto;
margin-left: auto;
display:block;
max-width: 100%;
height: auto;
}
but doesn't....
You have Bootstrap but you are not using it correctly, you have to use the syntax
check the grid layout and follow one of them
https://getbootstrap.com/docs/4.1/layout/grid/
container / row / column
You may want to take the time to learn Bootstrap 4 on Udemy there are plenty of free course on that topic
https://www.udemy.com/bootstrap-4-tutorials/
if your video code is outside the grid it won't resized...
check the grid layout and follow one of them
https://getbootstrap.com/docs/4.1/layout/grid/
container / row / column
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
You may want to take the time to learn Bootstrap 4 on Udemy there are plenty of free course on that topic
https://www.udemy.com/bootstrap-4-tutorials/
if your video code is outside the grid it won't resized...
What are we looking for?
If I look at the site on a small screen the video resizes - what should I be looking for.
If I look at the site on a small screen the video resizes - what should I be looking for.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I just figured that out. I thought that once that happened The site would center on the phone but I am still getting horizontal scroll bars for some reason. Any help is appreciated.
video {
/*margin-right: auto;
margin-left: auto;
display:block;*/
max-width: 100%;
height: auto;
}
Do you get the scroll bars in Mobile emulation
F12
Firefox click the icon on the top right of the dev console that looks like a small portrait rectangle on a larger one
Chrome Top left of dev bar the icon that looks like a phone.
Do you see scroll bars in either of these?
F12
Firefox click the icon on the top right of the dev console that looks like a small portrait rectangle on a larger one
Chrome Top left of dev bar the icon that looks like a phone.
Do you see scroll bars in either of these?
ASKER
I don't see the scroll bars in Google Chrome Dev. window. But I get them on my actual iphone 6.
you can use a script like https://github.com/videojs/video.js
this will be easier to get it resized / responsive
https://docs.videojs.com/tutorial-layout.html#responsive-mode
Plus don't set a fix width as it won't resized...
You can use a min-width instead...
or you can set your media queries with CSS
https://www.w3schools.com/css/css_rwd_mediaqueries.asp