videoObject.heightは、埋め込み動画(video要素)のheight属性の値を取得、もしくは、設定するプロパティ。
height属性には、埋め込み動画の高さを指定できる。JavaScriptを使いheight属性値を変更することで、動的に、埋め込み動画の高さを変更できる。
構文
取得
var $height = $videoElementReference.height;
戻り値
video要素のheight属性の値。埋め込み動画の高さ。
設定
$videoElementReference.height = 高さ;
- 高さ
- 埋め込み動画の高さを、ピクセル単位の数値で指定する。
サンプル
video要素のheight属性の値:
サンプルの動作について
2014/02/01現在、Chromeでのみ動作確認。
- 「180」のボタンをクリックすると、埋め込み動画の高さを「180px」にする。「video要素のheight属性の値:」の右横に、「180」と表示する。
- 「240」のボタンをクリックすると、埋め込み動画の高さを「240px」にする。「video要素のheight属性の値:」の右横に、「240」と表示する。
- 「320」のボタンをクリックすると、埋め込み動画の高さを「320px」にする。「video要素のheight属性の値:」の右横に、「320」と表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setHeight( $height ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.height = $height;
var $height = $elementReference.height;
document.getElementById( "sampleOutput" ).innerHTML = $height;
}
</script>
function setHeight( $height ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.height = $height;
var $height = $elementReference.height;
document.getElementById( "sampleOutput" ).innerHTML = $height;
}
</script>
HTML
<p>
<button onclick="setHeight('180');">180</button>
<button onclick="setHeight('240');">240</button>
<button onclick="setHeight('320');">320</button>
</p>
<p>video要素のheight属性の値:<span id="sampleOutput"></span></p>
<video src="http://alphasis.info/wp-content/uploads/2014/01/javascript-dom-video-sample.mp4" id="sample" height="240px" controls>
<p>お使いのブラウザはvideo要素に対応していません。</p>
</video>
<button onclick="setHeight('180');">180</button>
<button onclick="setHeight('240');">240</button>
<button onclick="setHeight('320');">320</button>
</p>
<p>video要素のheight属性の値:<span id="sampleOutput"></span></p>
<video src="http://alphasis.info/wp-content/uploads/2014/01/javascript-dom-video-sample.mp4" id="sample" height="240px" controls>
<p>お使いのブラウザはvideo要素に対応していません。</p>
</video>