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.
Related
I'm trying to insert a video into my html page and currently I only see a static image, not the video I would like. Am i doing something wrong here?
<div class="video" style="oveflow:hidden; width: 100%; height:425px;">
<video src="../static/data/israel/jerusalem.mp4" loop="true"
muted="true" playsinline="true"></video>
</div>
Have you tried to adding the attribute autoplay?
You should probably have <source src="../static/data/israel/jerusalem.mp4" type="video/mp4"> inside of your <video></video> tags.
I'm referring to this w3schools example here:
Inserting videos in HTML
Edit: Wait, my answer went from being down voted and unhelpful to being the best answer? How did this happen?
Inserting video in HTML is like the following:
<video width="320" height="240" controls>
<source src="../static/data/israel/jerusalem.mp4" type="video/mp4">
</video>
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 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
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);
}