HTML and CSS Reference
In-Depth Information
Figure 6-4. Controlling video width and height in JavaScript
Example 6-4 offers the full code listing for this application.
Example 6-4. Basic HTML5 video with resize range control
<!doctype html>
<html lang="en">
<meta charset="UTF-8">
<title>CH6EX4: Basic HTML5 Video With Resize Range Control </title>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {
var sizeElement = document.getElementById("videoSize")
sizeElement.addEventListener('change', videoSizeChanged, false);
var videoElement = document.getElementById("theVideo");
var widthtoHeightRatio = videoElement.width/videoElement.height;
function videoSizeChanged(e) {
var target =;
var videoElement = document.getElementById("theVideo");
videoElement.width = target.value;
videoElement.height = target.value/widthtoHeightRatio;
Search WWH ::

Custom Search