Responsive Web Design Learning (2) — Can videos be made responsive?

Previous episode review:

Yesterday we talked about how pages can respond to different device sizes. The main methods used are the @media command and the percentage of size .

Supplement to the previous episode:

Among them, use the following CSS settings to make the image or video size not exceed the width of the device screen:

This technique is called " Fluid Image Technique " in "Head First Mobile Web" .

Can videos be made responsive?

In addition to pictures, another common form of multimedia is video . Sometimes in web design, videos are added to the page as needed. Generally, the videos are uploaded to YouTube, Tudou/Youku, Sina and other websites, and then added to our web pages in the form of links.

Why can't I watch YouTube videos on my iPhone? (Overseas)

When viewing web videos on IOS, you cannot watch videos in Flash format without jailbreaking and installing plug-ins, because the browser on the iPhone does not support Adobe Flash. This is related to the commercial competition policies of Apple and other companies, and there is nothing we can do about it. For this problem, there is a solution for web design using YouTube video sources, which is to replace the original code snippet in the object embed format embedded in the web page with a new code snippet.

For example, the old page nested code snippet is:

Can I use <iframe> to source domestic videos?

We can see that the object embed method is used by intercepting a section of embedded video code from Tudou and Sina respectively:

Potato:

Now, wrap the Tudou video address with the <iframe> code block and put it into the test page, and a problem will occur:

( This is a picture... )

It can't go full screen... This is because the playback address is captured separately, and flash-related settings such as allowFullScreen are discarded. Then there are obviously two problems with using the iframe method:

First, the source format of the film has not changed and is still in swf format, so it still cannot be played by mobile phones that do not support Adobe Flash.

The second reason is that the parameter settings of the flash player are lost , resulting in the loss of some functions.

This is obviously unacceptable.

For the first point, we can only hope that video websites use more universal video formats to avoid the side effects of commercial competition among hardware manufacturers. For the second point, we will continue to use the object embed method, because those who cannot see the flash format on their mobile phones have found various cracks and plug-ins to make up for it, so web designers should continue to use the previous method in the absence of a more universal film source format.

However, the size of video formats is generally fixed, and it is difficult to dynamically change it according to the size of the device or the current size of the browser using only CSS without using JavaScript. As for the width of the video, it can be set as a percentage. For example, if it is set to 80% of the container, the video will always occupy 80% of the width of its container. However, the height cannot be set because most people do not scale the browser window proportionally. Either narrow it down or shorten it. Therefore, it is not realistic to rely on percentages to ensure video size scaling.

Under this premise, we still hope that the video will maintain a certain size, while the rest of the web page will dynamically change its layout according to the size of the browser.

As shown in the video:

It can be seen that the size of the video does not change during the entire process of pulling the browser. The width of the video will not decrease until the width of the browser is smaller than the width of the video (using the Fluid Image Technique mentioned above).

There is no new technique to create the whole effect, which is just to increase the CSS size judgment from two to three. For details, please see the demonstration code.

[Download the demo code here]

Summarize:

It seems that it is impossible to make the video size adaptive by CSS alone. I hope that mobile devices can watch page videos normally and I also expect video websites to use more universal video formats instead of flash...

Finally, let’s end with a formula from the book : RWD = Fluid-grid layouts + CSS media queries + Fluid Image/Media + a state of mind

The general idea is that responsive design = fluid grid layout + @media statement + fluid images/media + designer awareness