Azure Media Player をレスポンシブ対応するには
Azure Media Player は標準ではレスポンシブ対応していません。レスポンシブ対応をする為にはjava scriptで書くしか現状では無いようです。
1.HTML5ページのに下記のコードを指定します
<link href="//amp.azure.net/libs/amp/1.7.3/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet"> <script src="//amp.azure.net/libs/amp/1.7.3/azuremediaplayer.min.js"></script>
2.HTML5ページのに下記のコードを指定します
<section id="videoSection"> <div id="videoContainer"> </div> </section>
3.下記のJavaScriptを記入します
<script type="text/javascript"> $(function() { var videoWidth = 500; if ($(window).width() < 750) { videoWidth = $(window).width() * 11 / 16; } document.getElementById("videoContainer").style.height = videoWidth + "px"; $("#videoContainer").append('<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" controls autoplay width="100%" height="100%" poster="" tabindex="0"><source src="ここにMedia ServiceのURL" type="video/mp4" /><p class="amp-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p></video>'); $(document).ready(function () { window.addEventListener('resize', function (event) { if (window.innerWidth < 750) { document.getElementById("videoContainer").style.height = $(window).width() * 11 / 16 + "px"; } else { document.getElementById("videoContainer").style.height = "500px"; } }); }); }); </script>
ASP.NET MVC がBootstrap標準なので、Azure Media Player もVideoタグで対応出来ればいいんですが・・・。これからに期待ですかね。