I want to hide the video play button which is shown in the screen , is there any way for that ? I am using html5 video player.
I am unable to add image of that here . Please check the link button , there is a image and video button is highlighted by red circle.
http://awesomescreenshot.com/02c4ocr318
Is there any way to complete this ?
Edit: code:
<div class="v" id="player">
<video id="myVideo" width="100%" height="100%" poster="1.png" controls >
<source src="nrgmom.mp4?title=0&byline=0&portrait=0" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
</video>
<!-- <iframe frameborder="0" allowfullscreen="" src="youtube.com/embed/nMehBNvN_PM"></iframe>-->;
</div>
Remove controls attribute from video element.See this documentation for further information related to video element.
mozilla video element documentation
I would recommend You to use basic html element instead of any jquery/js plugins as it does not show any play overlay by default and works just fine in all browsers with html5 support. U can also customize is via css/js.
Check out: http://www.w3schools.com/html/html5_video.asp
Related
Now I have a video(mp4,webm) as background of a html-section. But it does not look good on mobile. I would like place the original html file into the html code, as background. (I have an animated html5 file whit js) Is it possible?
Thank you. enter link description here
<section class="pt-page pt-page-1 section-with-bg section-paddings-0" style="background-image: url(images/home_page_bg_1.jpg);" data-id="home">
<video autoplay loop muted playsinline id="video-background">
<source src="images/movie.mp4" type="video/mp4">
<source src="images/moviewebm.webm" type="video/webm">
</video>
</section>
You have to implement different sizes of the video player for different screen sizes using CSS that will fill the screen.
I tested the link and it works fine. Just scale it.
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 attempting to implement a background video simiilar to this. Stretching the full screen but maintain a height of 400px. How may I achieve this without JavaScript? Heres the HTML I have so far
<div class="project__three">
<div class="grid">
<video src="./videos/test.mp4" id="bg-video" muted autoplay loop ></video>
</div>
</div>
I wrote a blog post about this a while back. I don't think you're using the video tag correctly. I think it should look more like this:
<video muted autoplay loop>
<source src="http://yourwebsite.com/your-video-file.mp4" type="video/mp4"/>
<source src="http://yourwebsite.com/your-video-file.ogg" type="video/ogg"/>
<source src="http://yourwebsite.com/your-video-file.webm" type="video/webm"/>
Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
I'm pretty sure you have to include the "ogg" and "webm" extensions for HTML5 video to fully work.
Here is a link to my post where go into full detail.
This works with the above, doesn't look great though.Put it in your css
video{
webkit - transform:scaleX(2);
moz - transform:scaleX(2);
transform:scaleX(2);
}
I have a code
<iframe id="vdoiframe" src="http://keralacarpentry.com/immobiler/media_gallery/BMP2_PSP.mp4" height="500" width="950">
</iframe>
my question is how can we set a width to audio tag using css?.In this code my video is small.i want to increse its width.Is that possible to set width to this audio tag ?.
Rather than link to the video in an iframe can you link using the <video> tag? That way you can control the size, placement, auto-play, controls etc using the HTML5 capabilities
<video height="250" width="320">
<source="http://keralacarpentry.com/immobiler/media_gallery/BMP2_PSP.mp4" type="video/mp4">
</video>