For movie to css

How TO — Fullscreen Video

Learn how to create a full screen video background with CSS.

Fullscreen Video Background

Learn how to create a full screen video background that covers the entire browser window:

How To Create a Fullscreen Video

Step 1) Add HTML:

Example

Step 2) Add CSS:

Example

/* Style the video: 100% width and height to cover the entire window */
#myVideo position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
>

/* Add some content at the bottom of the video/page */
.content position: fixed;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 20px;
>

/* Style the button used to pause/play the video */
#myBtn width: 200px;
font-size: 18px;
padding: 10px;
border: none;
background: #000;
color: #fff;
cursor: pointer;
>

#myBtn:hover background: #ddd;
color: black;
>

Step 3) Add JavaScript:

Optionally, you can add JavaScript to pause/play the video with a click of a button:

Example

// Get the button
var btn = document.getElementById(«myBtn»);

// Pause and play the video, and change the button text
function myFunction() if (video.paused) video.play();
btn.innerHTML = «Pause»;
> else video.pause();
btn.innerHTML = «Play»;
>
>

Источник

The &LTvideo> and &LTsource> tags

You’ve properly prepared a video file for the web. You’ve given it correct dimensions and the correct resolution. You’ve even created separate WebM and MP4 files for different browsers.

For anyone to see your video, you still need to add it to a web page. Doing so properly requires adding two HTML elements: the &LTvideo> element and the &LTsource> element. In addition to basics about these tags, this article explains attributes you should add to those tags to craft a good user experience.

You always have the option of uploading your file to [YouTube] or [Vimeo]. In many cases, this is preferable to the procedure described here. Those services handle formatting and filetype conversion for you, as well as provide the means to embed a video in your web page. If you need to manage this yourself, read on.

Specify a single file #

Although it’s not recommended, you can use the video element by itself. Always use the type attribute as shown below. The browser uses this to determine if it can play the provided video file. If it can’t, the enclosed text displays.

video src="chrome.webm" type="video/webm"> 
p>Your browser cannot play the provided video file.</p>
</video>

Specify multiple file formats #

Recall from Media file basics that not all browsers support the same video formats. The &LTsource> element lets you specify multiple formats as a fallback in case the user’s browser doesn’t support one of them.

The example below produces the embedded video that is used as an example later in this article.

video controls> 
source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm" type="video/webm"> 
source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.mp4" type="video/mp4"> 
p>Your browser cannot play the provided video file.</p>
</video>

Notice in the previous example that the controls attribute was introduced. This instructs browsers to allow the user to control video playback, including volume, seeking, selecting captions, and pause/resume playback among others.

You should always add a type attribute to the &LTsource> tags event though it is optional. This ensures that the browser only downloads the file that it is capable of playing.

This approach has several advantages over serving different HTML or server-side scripting, especially on mobile:

• You can list formats in order of preference.
• Client-side switching reduces latency; only one request is made to get content.
• Letting the browser choose a format is simpler, quicker, and potentially more reliable than using a server-side support database with user-agent detection.
• Specifying each file source’s type improves network performance; the browser can select a video source without having to download part of the video to «sniff» the format.

These issues are especially important in mobile contexts, where bandwidth and latency are at a premium, and the user’s patience is likely limited. Omitting the type attribute can affect performance when there are multiple sources with unsupported types.

There are a few ways you can dig into the details. Check out A Digital Media Primer for Geeks to find out more about how video and audio work on the web. You can also use remote debugging in DevTools to compare network activity with type attributes and without type attributes.

Be sure to check the response headers in your browser developer tools to [ensure your server reports the right MIME type]; otherwise video source type checks won’t work.

Specify start and end times #

Save bandwidth and make your site feel more responsive: use media fragments to add start and end times to the video element.

Include a poster image #

Add a poster attribute to the video element so that viewers have an idea of the content as soon as the element loads, without needing to download the video or start playback.

video poster="poster.jpg" . > 
…
</video>

A poster can also be a fallback if the video src is broken or if none of the supplied video formats are supported. The only downside to a poster images is an additional file request, which consumes some bandwidth and requires rendering. For more information see Efficiently encode images.

Without a fallback poster, the video just looks broken.

A fallback poster makes it seem as if the first frame has been captured.

Ensure videos don’t overflow containers #

When video elements are too big for the viewport, they may overflow their container, making it impossible for the user to see the content or use the controls.

You can control video dimensions using CSS. If CSS does not meet all of your needs, JavaScript libraries and plugins such as FitVids (outside the scope of this article) can help, even for videos from YouTube and other sources. Unfortunately, these resources can increase your network payload sizes with negative consequences for your revenues and your users’ wallets.

For simple uses like the ones I’m describing here, use CSS media queries to specify the size of elements depending on the viewport dimensions; max-width: 100% is your friend.

For media content in iframes (such as YouTube videos), try a responsive approach (like the one proposed by John Surdakowski).

Don’t force element sizing that results in an [aspect ratio] different from the original video. Squashed or stretched videos looks awful.

CSS #

.video-container  
position: relative; 
padding-bottom: 56.25%; 
padding-top: 0; 
height: 0; 
overflow: hidden;
>

.video-container iframe,
.video-container object,
.video-container embed  
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%;
>

HTML #

div class="video-container"> 
iframe 
src="//www.youtube.com/embed/l-BA9Ee2XuM" 
frameborder="0" 
width="560" 
height="315" 
></iframe>
</div>

Compare the responsive sample to the unresponsive version. As you can see, the unresponsive version isn’t a great user experience.

Device orientation #

Device orientation isn’t an issue for desktop monitors or laptops, but it’s hugely important when considering web page design for mobile devices and tablets.

Safari on iPhone does a good job of switching between portrait and landscape orientation:

Device orientation on an iPad and Chrome on Android can be problematic. For example, without any customization a video playing on an iPad in landscape orientation looks like this:

Setting the video width: 100% or max-width: 100% with CSS can resolve many device orientation layout problems.

Autoplay #

The autoplay attribute controls whether the browser downloads and plays a video immediately. The precise way it works depends on the platform and browser.

• Chrome: Depends on multiple factors including but not limited to whether the viewing is on desktop and whether the mobile user has added your site or app to their homescreen. For details, see Autoplay best practices.
• Firefox: Blocks all video and sound, but gives users the ability to relax these restrictions for either all sites or particular sites. For details, see Allow or block media autoplay in Firefox
• Safari: Has historically required a user gesture, but has been relaxing that requirement in recent versions. For details, see New &LTvideo> Policies for iOS.

Even on platforms where autoplay is possible, you need to consider whether it’s a good idea to enable it:

• Data usage can be expensive.
• Playing media before the user wants it can hog bandwidth and CPU, and thereby delay page rendering.
• Users may be in a context where playing video or audio is intrusive.

Preload #

The preload attribute provides a hint to the browser as to how much information or content to preload.

Value	Description
none	The user might chose not to watch the video, so don’t preload anything.
metadata	Metadata (duration, dimensions, text tracks) should be preloaded, but with minimal video.
auto	Downloading the entire video right away is considered desirable. An empty string produces the same result.

The preload attribute has different effects on different platforms. For example, Chrome buffers 25 seconds of video on desktop but none on iOS or Android. This means that on mobile, there may be playback startup delays that don’t happen on desktop. See Fast playback with audio and video preload or Steve Souders’ blog for more details.

Now that you know how to add media to your web page it’s time to learn about Media accessibility where you will add captions to your video for hearing impaired, or when playing the audio is not a viable option.

Источник

HTML Video

The HTML element is used to show a video on a web page.

Example

The HTML Element

To show a video in HTML, use the element:

Example

How it Works

The controls attribute adds video controls, like play, pause, and volume.

It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads.

The element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format.

The text between the tags will only be displayed in browsers that do not support the

HTML Autoplay

To start a video automatically, use the autoplay attribute:

Example

Note: Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.

Add muted after autoplay to let your video start playing automatically (but muted):

Example

Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Element
	4.0	9.0	3.5	4.0	10.5

HTML Video Formats

There are three supported video formats: MP4, WebM, and Ogg. The browser support for the different formats is:

Browser	MP4	WebM	Ogg
Edge	YES	YES	YES
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	YES	NO
Opera	YES	YES	YES

HTML Video — Media Types

HTML Video — Methods, Properties, and Events

The HTML DOM defines methods, properties, and events for the element.

This allows you to load, play, and pause videos, as well as setting duration and volume.

There are also DOM events that can notify you when a video begins to play, is paused, etc.

Example: Using JavaScript

Play/Pause Big Small Normal

Your browser does not support HTML5 video.

For a full DOM reference, go to our HTML Audio/Video DOM Reference.

HTML Video Tags

Tag	Description
	Defines a video or movie
	Defines multiple media resources for media elements, such as and
	Defines text tracks in media players

Источник