视频标签中的全屏按钮丢失

Question

full screen button in video tag missing when page containing video is loaded externally on another pages div

I have a page external.php . In this page when i use the following code

echo 
   '<video width="400" controls>
  <source src="movie.mp4" type="video/mp4">
</video>';

i get a video with full screen button in it on chrome.But when i try to load this external.php on another page (home.php) div the video is coming but the full screen button is missing.But in IE there is no such problem.

Answer 1

You can either solve this via CSS OR Fullscreen API.

1. CSS

I think you can accomplish this by changing the css for the #document fragments, these are DOM1 specs and supported by all browsers, but about the styling, I'm not sure. The following solution is webkit specific.

You need just to write this code in your css:

video::-webkit-media-controls-fullscreen-button {}

2. Full screen API

If you want to accomplish it by Fullscreen API check below demo first:

Demo Full screen video

As you can see a very simple demo showing HTML5 video in full screen, make sure you're using Chrome dev, webkit or firefox nightly.

For more detail you can check it here. Browsers may provide a user interface, but shouldn't provide a programmable one.