[Go] Responsive web Design Learning (2)-can videos be made into a responsive form?

Original address: http://www.jb51.net/web/70361.html

Last episode review:

Yesterday we talked about how the page responds to different device sizes. The main use of the @media command and the size of the percentage of these two strokes.

Last episode supplement:

Where the image or video size does not exceed the width of the device screen using the following CSS settings:

Copy CodeThe code is as follows:
IMG, object{
max-width:100%;
}

This statement is generally added to the @media screen and (max-width:481) judgment, the main is to allow mobile phone users to view the Web page picture is not larger than the phone.

This trick is called "Fluid Image technique" in Head first Moblie Web .

Can video be made into a responsive form?

In addition to the pictures, there is a common multimedia format that is video . Sometimes in the web design, according to the needs of the page will be added to the video, the general video is uploaded to YouTube, potato/Youku, Sina and other sites, and then joined in the form of links to our web page.

Why can't I see YouTube videos on my iphone? (Outside the border)

When viewing web video on iOS, it's impossible to see the video in Flash format without jailbreaking the plugin, because the browser on the iphone doesn't support Adobe Flash, which is related to the business competition policy of companies like Apple. For this issue, there is a solution to the web design using the YouTube video source, which is to replace the code snippet that originally nested in the Web page with the object embed format into a new code snippet.

For example, the old page nesting code snippet is:

Copy CodeThe code is as follows:
<object width= "height=" 179 "type=" Application/x-shockwave-flash "Data=" http://www.youtube.com/v/ O-joeaufdq4?fs=1&amp;h1=en_us&amp;rel=0 "><embed src= .../></object>

Replace it with the following:

Copy CodeThe code is as follows:
<iframe src= "http://www.youtube.com/embed/O-jOEAufDQ4" style= "max-width:100%" ></iframe>

As you can see, the way out of the two videos is actually different, and YouTube puts the embedded video for the mobile device display in the embed directory so that most of the mobile devices can watch the video properly.

Domestic video source can use <iframe> this trick?

Each section of the embedded video code that intercepts potatoes and Sina can be seen with the object embed way:

Potatoes:

Copy CodeThe code is as follows:
<embed
Src= ".... swf"
Type= "Application/x-shockwave-flash"
Allowscriptaccess= "Always"
Allowfullscreen= "true"
Wmode= "Opaque"
Width= "480" height= "></embed>"

Sina

Copy CodeThe code is as follows:
<div><object id= ' sinaplayer ' width= ' 480 ' height= ' 370 ' >
<param name= ' allowscriptaccess ' value= ' Always '/>
<embed pluginspage= ' Http://www.macromedia.com/go/getflashplayer '
Src= ' .... swf '
Type= ' Application/x-shockwave-flash '
Allowscriptaccess= ' Always '
Allowfullscreen= ' true '
Name= ' Sinaplayer '
Width= ' 480 ' height= ' 370 ' ></embed>
</object></div>

The parameters of the two settings are similar, but the potato code is much more concise.

Now, using the <iframe> code block to wrap the potato video address into the test page, there is a problem:

( This is the picture Oh ...) ）

Not full screen ... This is because the playback address is intercepted separately, and flash-related settings such as allowfullscreen are discarded. Then there are obviously two problems with the IFrame method:

One is that the source format has not changed , or SWF format, still cannot be played by a mobile phone that does not support Adobe Flash.

Second, because of the loss of the Flash Player parameter settings , and lost part of the function.

This is obviously unacceptable.

For the 1th, the video site can only be expected to use a more general video format to avoid the side effects of commercial competition between the various hardware vendors; for the 2nd, we will continue to use the way of object embed, because the phone can not see the flash format of the Pro has found a variety of hack, plug-ins to make up, Therefore, the Web designer in the absence of a more common source format, the use of the previous method is good.

However, the size of the video format is generally fixed, using only CSS instead of JavaScript is very difficult to dynamically change depending on the size of the device or the current size of the browser. As far as the width of the video is concerned, it can be set as a percentage, such as 80% of the container, and the video will always occupy the width of 80% of its container, but height cannot be set because the average person does not scale the browser window proportionally. Either pull the narrow point or shorten the point. So, a percentage of the way to ensure that the size of the video zoom is not very realistic.

In such a premise, still want to maintain a certain size of the video, and the rest of the page based on the size of the browser to dynamically change the layout.

As shown in the video:

As you can see, the size of the video does not change as the browser is pulled, until the width of the browser is less than the width of the video, the width of the video becomes smaller (using the Fluid Image techniquementioned above).

There is no new technique for making the whole effect, that is, the size of the CSS is judged by two to three different types. Specifically, you can see the demo code.

"Demo code here to download"

Summarize:

The adaptive video size alone does not seem to be the only CSS itself. And hope that the mobile device can watch the page video is also expected to use the video site more general video format instead of Flash ...

End with a formula in a book. RWD = fluid-grid layouts + CSS media queries + Fluid Image/media + a state of mind

The main idea is responsive design = flow Grid layout + @media statement + streaming picture/media + Designer's awareness

[Go] Responsive web Design Learning (2)-can videos be made into a responsive form?