QA@IT
«回答へ戻る

問題点を追記

0
 自己解決できました。
-下記cssで対応できました。
+下記cssでwindows chromeは対応できたけど、問題点も残っています。
 
 ```css
 video::-webkit-media-controls-enclosure {
     width: calc(100% + 30px); /* Adjust as needed */
 }
 ```
+// media-controlsを30px大きくして、はみ出た所を非表示(結果、最右のダウンロードボタンが非表示)
 
-2017-01-07時点のchrome55で下記は機能しませんでした。
+2017-01-07時点のchrome55で下記は機能しませんでした。下記CSSだけで非表示になってほしいですね。
 `video::-internal-media-controls-download-button {display:none;}`
 
-でも、Safariで表示が変かもしれません。
-http://stackoverflow.com/questions/41115801/in-chrome-55-prevent-showing-download-button-for-html-5-video
-> It may be a solution but looks like it may change more things than expected (ie: in Safari).
+### 問題点
+
+* mac Safariで表示が変かも。
+  * http://stackoverflow.com/questions/41115801/in-chrome-55-prevent-showing-download-button-for-html-5-video
+  * > It may be a solution but looks like it may change more things than expected (ie: in Safari).
 (機械翻訳) それは解決策かもしれませんが、予想より多くのものを変更する可能性があるようです(Safariでは)。
+* chrome cast できると、ダウンロードボタン非表示が機能しない。
+  * キャストボタンが最右に表示されるため、キャストボタンが消えてダウンロードボタンは残る
+  * http://stackoverflow.com/questions/39602852/disable-download-button-for-google-chrome
+
+chromiumのissueにも改善要求があがっていたので、次期アップデートとか様子を見た方がよさそうです。
 
 ### サンプル
 

自己解決できました。
下記cssでwindows chromeは対応できたけど、問題点も残っています。

video::-webkit-media-controls-enclosure {
    overflow:hidden;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px); /* Adjust as needed */
}

// media-controlsを30px大きくして、はみ出た所を非表示(結果、最右のダウンロードボタンが非表示)

2017-01-07時点のchrome55で下記は機能しませんでした。下記CSSだけで非表示になってほしいですね。
video::-internal-media-controls-download-button {display:none;}

問題点

chromiumのissueにも改善要求があがっていたので、次期アップデートとか様子を見た方がよさそうです。

サンプル

http://jsfiddle.net/6ebLs316/

参考

chromiumのissueで改善要求が上がってました
https://bugs.chromium.org/p/chromium/issues/detail?id=675596&can=2&q=media%20download&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified

自己解決できました。
下記cssでwindows chromeは対応できたけど、問題点も残っています。

```css
video::-webkit-media-controls-enclosure {
    overflow:hidden;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px); /* Adjust as needed */
}
```
// media-controlsを30px大きくして、はみ出た所を非表示(結果、最右のダウンロードボタンが非表示)

2017-01-07時点のchrome55で下記は機能しませんでした。下記CSSだけで非表示になってほしいですね。
`video::-internal-media-controls-download-button {display:none;}`

### 問題点

* mac Safariで表示が変かも。
  * http://stackoverflow.com/questions/41115801/in-chrome-55-prevent-showing-download-button-for-html-5-video
  * > It may be a solution but looks like it may change more things than expected (ie: in Safari).
(機械翻訳) それは解決策かもしれませんが、予想より多くのものを変更する可能性があるようです(Safariでは)。
* chrome cast できると、ダウンロードボタン非表示が機能しない。
  * キャストボタンが最右に表示されるため、キャストボタンが消えてダウンロードボタンは残る
  * http://stackoverflow.com/questions/39602852/disable-download-button-for-google-chrome

chromiumのissueにも改善要求があがっていたので、次期アップデートとか様子を見た方がよさそうです。

### サンプル

http://jsfiddle.net/6ebLs316/

### 参考

chromiumのissueで改善要求が上がってました
https://bugs.chromium.org/p/chromium/issues/detail?id=675596&can=2&q=media%20download&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified

css変更

0
 下記cssで対応できました。
 
 ```css
-video::-webkit-media-controls {
-    overflow: hidden !important
-}
 video::-webkit-media-controls-enclosure {
-    width: calc(100% + 32px);
-    margin-left: auto;
+    overflow:hidden;
 }
+
+video::-webkit-media-controls-panel {
+    width: calc(100% + 30px); /* Adjust as needed */
+}
 ```
 
-### サンプル
+2017-01-07時点のchrome55で下記は機能しませんでした。
+`video::-internal-media-controls-download-button {display:none;}`
 
-http://jsfiddle.net/yqtg7sn4/
+でも、Safariで表示が変かもしれません。
+http://stackoverflow.com/questions/41115801/in-chrome-55-prevent-showing-download-button-for-html-5-video
+> It may be a solution but looks like it may change more things than expected (ie: in Safari).
+(機械翻訳) それは解決策かもしれませんが、予想より多くのものを変更する可能性があるようです(Safariでは)。
 
-### 情報元
+### サンプル
 
-http://stackoverflow.com/questions/39602852/disable-download-button-for-google-chrome
+http://jsfiddle.net/6ebLs316/
 
 ### 参考
 
 chromiumのissueで改善要求が上がってました
 https://bugs.chromium.org/p/chromium/issues/detail?id=675596&can=2&q=media%20download&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified
-

自己解決できました。
下記cssで対応できました。

video::-webkit-media-controls-enclosure {
    overflow:hidden;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px); /* Adjust as needed */
}

2017-01-07時点のchrome55で下記は機能しませんでした。
video::-internal-media-controls-download-button {display:none;}

でも、Safariで表示が変かもしれません。
http://stackoverflow.com/questions/41115801/in-chrome-55-prevent-showing-download-button-for-html-5-video

It may be a solution but looks like it may change more things than expected (ie: in Safari).
(機械翻訳) それは解決策かもしれませんが、予想より多くのものを変更する可能性があるようです(Safariでは)。

サンプル

http://jsfiddle.net/6ebLs316/

参考

chromiumのissueで改善要求が上がってました
https://bugs.chromium.org/p/chromium/issues/detail?id=675596&can=2&q=media%20download&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified

自己解決できました。
下記cssで対応できました。

```css
video::-webkit-media-controls-enclosure {
    overflow:hidden;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px); /* Adjust as needed */
}
```

2017-01-07時点のchrome55で下記は機能しませんでした。
`video::-internal-media-controls-download-button {display:none;}`

でも、Safariで表示が変かもしれません。
http://stackoverflow.com/questions/41115801/in-chrome-55-prevent-showing-download-button-for-html-5-video
> It may be a solution but looks like it may change more things than expected (ie: in Safari).
(機械翻訳) それは解決策かもしれませんが、予想より多くのものを変更する可能性があるようです(Safariでは)。

### サンプル

http://jsfiddle.net/6ebLs316/

### 参考

chromiumのissueで改善要求が上がってました
https://bugs.chromium.org/p/chromium/issues/detail?id=675596&can=2&q=media%20download&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified

微修正

0
 
 ### 参考
 
-chromiumのissueでも話題に上がってました
+chromiumのissueで改善要求が上がってました
 https://bugs.chromium.org/p/chromium/issues/detail?id=675596&can=2&q=media%20download&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified
 

自己解決できました。
下記cssで対応できました。

video::-webkit-media-controls {
    overflow: hidden !important
}
video::-webkit-media-controls-enclosure {
    width: calc(100% + 32px);
    margin-left: auto;
}

サンプル

http://jsfiddle.net/yqtg7sn4/

情報元

http://stackoverflow.com/questions/39602852/disable-download-button-for-google-chrome

参考

chromiumのissueで改善要求が上がってました
https://bugs.chromium.org/p/chromium/issues/detail?id=675596&can=2&q=media%20download&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified

自己解決できました。
下記cssで対応できました。

```css
video::-webkit-media-controls {
    overflow: hidden !important
}
video::-webkit-media-controls-enclosure {
    width: calc(100% + 32px);
    margin-left: auto;
}
```

### サンプル

http://jsfiddle.net/yqtg7sn4/

### 情報元

http://stackoverflow.com/questions/39602852/disable-download-button-for-google-chrome

### 参考

chromiumのissueで改善要求が上がってました
https://bugs.chromium.org/p/chromium/issues/detail?id=675596&can=2&q=media%20download&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified

サンプル追加

0
 }
 ```
 
+### サンプル
+
+http://jsfiddle.net/yqtg7sn4/
+
 ### 情報元
 
 http://stackoverflow.com/questions/39602852/disable-download-button-for-google-chrome

自己解決できました。
下記cssで対応できました。

video::-webkit-media-controls {
    overflow: hidden !important
}
video::-webkit-media-controls-enclosure {
    width: calc(100% + 32px);
    margin-left: auto;
}

サンプル

http://jsfiddle.net/yqtg7sn4/

情報元

http://stackoverflow.com/questions/39602852/disable-download-button-for-google-chrome

参考

chromiumのissueでも話題に上がってました
https://bugs.chromium.org/p/chromium/issues/detail?id=675596&can=2&q=media%20download&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified

自己解決できました。
下記cssで対応できました。

```css
video::-webkit-media-controls {
    overflow: hidden !important
}
video::-webkit-media-controls-enclosure {
    width: calc(100% + 32px);
    margin-left: auto;
}
```

### サンプル

http://jsfiddle.net/yqtg7sn4/

### 情報元

http://stackoverflow.com/questions/39602852/disable-download-button-for-google-chrome

### 参考

chromiumのissueでも話題に上がってました
https://bugs.chromium.org/p/chromium/issues/detail?id=675596&can=2&q=media%20download&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified

回答を投稿

自己解決できました。
下記cssで対応できました。

video::-webkit-media-controls {
    overflow: hidden !important
}
video::-webkit-media-controls-enclosure {
    width: calc(100% + 32px);
    margin-left: auto;
}

情報元

http://stackoverflow.com/questions/39602852/disable-download-button-for-google-chrome

参考

chromiumのissueでも話題に上がってました
https://bugs.chromium.org/p/chromium/issues/detail?id=675596&can=2&q=media%20download&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified

自己解決できました。
下記cssで対応できました。

```css
video::-webkit-media-controls {
    overflow: hidden !important
}
video::-webkit-media-controls-enclosure {
    width: calc(100% + 32px);
    margin-left: auto;
}
```

### 情報元

http://stackoverflow.com/questions/39602852/disable-download-button-for-google-chrome

### 参考

chromiumのissueでも話題に上がってました
https://bugs.chromium.org/p/chromium/issues/detail?id=675596&can=2&q=media%20download&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified