The behavior is as intended under Windows 10 (Firefox or Edge) and an Android phone I tested with, for example, the 1080P video (1920 pixel wide) takes up exactly half the width of a 4K monitor.
But when the web page is opened on iPhone 10 (only tested with Safari) or iPad Air 3 (both Edge and Chrome) the videos are "enlarged" and take up a much larger portion of the device screen than I expect. For example, the iPad Air 3 screen resolution is supposedly 2224×1668 and more than enough to contain the 1080P video. However, the video doesn't even fit on the screen (I can confirm I didn't accidentally zoom in.)
The HTML has been stripped down as much as possible in my own troubleshooting and below is the entire HTML of the page. The poster images are of the exact same dimension as their corresponding videos.
<b>LD 360P:</b><p>
<video width="640" height="360" controls preload="none" poster="2018California_360P_low_poster.jpg">
<source src="2018California_360P_low.mp4" type="video/mp4">
</video><p>
<b>HD 720P:</b><p>
<video width="1280" height="720" controls preload="none" poster="2018California_720P_low_poster.jpg">
<source src="2018California_720P_low.mp4" type="video/mp4">
</video><p>
<b>HD 1080P:</b><p>
<video width="1920" height="1080" controls preload="none" poster="2018California_1080P_high_poster.jpg">
<source src="2018California_1080P_high.mp4" type="video/mp4">
</video>
<p>
<a href="photo13.html"><h3>Back to the list of albums</h3></a>
Found the answer myself. It turns out when it comes to iPad the physical pixels are not used 1 to 1 for display. In the case of my iPad it is 2:1, which means the 2224 X 1668 pixels hardware resolution corresponds to a display size of 1112 X 834 "points" (verified by visiting "whatismyscreenresolution.net"), thus creating the observed behavior. The display size can't be changed for an iPad. However, if the default 100% Page Zoom settings of Safari is changed to 50% then the video poster images all fit on the screen. My Android phone has a hardware resolution of 1280 X 720 with a display size of 732 X 412. The "downscale" is less than that of the iPad so things appeared to be working as expected in my test when they were not.
From the text size perspective not using the native hardware resolution 1:1 for display makes sense due to the small size of these mobile screens, because otherwise the default text size would be too small for some to read comfortably. This also explains why photos look less sharp on the iPad than on my 4k computer monitor even when a physical pixel of the iPad is smaller than that of the monitor.