Sorry if this has been asked before (I definitely tried searching). I have an HTML video embedded on a page, and the player controls are displaying outside the video window. I'd like to get them inside the video window, but I can't seem to find any customization available for the controls attribute.
I know the HTML <video> tag isn't very customizable, but I've seen many HTML videos display in the desired way (with controls inside the video window, not outside), so I assume it's possible.
Example of what I'm trying to do: http://easyhtml5video.com/
How it currently looks:
It appears that the height attribute is the problem.
Without the height attribute:
<video controls="" id="videoelement" width="480" style="margin:auto; padding-left:107px" webkit-playsinline="">
<source src="http://easyhtml5video.com/images/happyfit2.mp4" type="video/mp4" />
<source src="http://easyhtml5video.com/images/happyfit2.webm" type="video/webm" />
<source src="http://easyhtml5video.com/images/happyfit2.ogv" type="video/ogg" />
</video>
With height attribute:
<video controls="" id="videoelement" width="480" height="360" style="margin:auto; padding-left:107px" webkit-playsinline="">
<source src="http://easyhtml5video.com/images/happyfit2.mp4" type="video/mp4" />
<source src="http://easyhtml5video.com/images/happyfit2.webm" type="video/webm" />
<source src="http://easyhtml5video.com/images/happyfit2.ogv" type="video/ogg" />
</video>
The height attribute should be the actual height of the video.
height of your video tag should match the height of the actual video resolution....
here is the FIDDLE
In this the video resolution is 604px X 256px
If the video tag has 604x256 then the controls stay within, if I changed the height to 356 as demonstrated in the fiddle, then the controls are going outside the video.
You might want to check your video resolution and compare it with the height of your video tag.
Not sure if width matters though.
Related
I currently have this:
<video controls="" autoplay="" name="media"><source src="...." type="video/mp4"></video>
It turns out, that half of the video is cut out of the screen, and I can't fix it.
Also, if you could help with this too, I'd like to know how to play the video in javascript.
Thanks!
Here is what I tried vs what I am expecting:
You need to add attributes responsible for width and height.
As an example:
<video id="Test_Video" width="400" height="240" controls>
<source src="gfg.mp4" type="video/mp4">
</video>
the size is in pixels. If you want you can also specify it in % f.ex width="100%"
This is my code:
<div class="sameline">
<video width="800" height="315" controls>
<source src="../videosrecords/Half Brothers.mp4" type="video/mp4" />
</video>
</div>
For some reason, the controls end up looking really weird. Like this:
I'm creating a movie-sharing website so all containers should be in the same size. How can I set it up so that the movie perfectly fits the video area?
The website can be located at: https://jokerfilms.000webhostapp.com/video/HalfBrothers
Like the title suggests, I've got a HTML5 video that is currently sitting behind a wrapping div, like so:
<div class="video-wrap">
<video poster="/Media/video/index.files/html5video/Circles_Sequence_MORE_TEXT_v05.jpg" style="width:100%" title="What is Customer Devotion?" id="html5_video_qlpjkwou10fcg14i">
<source src="/Media/video/index.files/html5video/Circles_Sequence_MORE_TEXT_v05.m4v" type="video/mp4">
<source src="/Media/video/index.files/html5video/Circles_Sequence_MORE_TEXT_v05.webm" type="video/webm">
<source src="/Media/video/index.files/html5video/Circles_Sequence_MORE_TEXT_v05.ogv" type="video/ogg">
<source src="/Media/video/index.files/html5video/Circles_Sequence_MORE_TEXT_v05.mp4" type="video/ogg">
</video>
</div>
The issue is that when the video plays, because of the constrictive div, there's no way to get any of the native right click controls up. I.e. I can't pause, play, loop, etc.
Is there a way around this without removing the div?
Thanks.
controls ="" attribute need to be added in video tag.
Example
<video width="400" controls>
demo
A nice workaround could be to popup the video. That way the user could interact directly with the video instead of the div.
I want my html email videos to be responsive. So what will be the procedure for that? Please let me know.
In your HTML file , make div and paste below code there...
<object class="responsiv-video">
<video autoplay >
<source src="file_name.mp4" />
<source src="file_name.3gp" />
</video>
</object>
it is to my understanding that you want to embed a video on your site that:
Is responsive
Allows both autoplay and loop
Uses Bootstrap
This Demo Here should do just that. You have to place another embed class outside of the object/embed/iframe tag as per the the instructions here - but you're also able to use a video tag instead of the object tag even though it's not specified.
<div align="center" class="embed-responsive embed-responsive-16by9">
<video autoplay loop class="embed-responsive-item">
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
</video>
</div>
Responsive mp4-video
I'm facing this problem with skrollr: everything goes fine, then when adding a video, it continues playing if out of viewport, even if the div has a display:none declaration. I tried searching here and Google but couldn't find anything and at this point I'm really lost.
For reference, this is the code I'm using:
<div id="seventh" class="view" data-0="display:none;top:0%;" data-27000="display:block;opacity:0;" data-29000="opacity:1;" data-32000="opacity:0;" >
<video id="video" class="video-js vjs-default-skin" controls preload="none" width="1223" height="611" poster="img/poster.jpg" data-setup="{}">
<source src="videos/vid.webm" type='video/webm' />
<source src="videos/vid.mp4" type='video/mp4' />
</video>
</div>
any help on how to achieve this really appreciated
Use
skrollr.init({
render: function(data) {
//get current element opacity and position then play or pause the video
}
});
See http://jsfiddle.net/ybP6b/ for a working example