検証ツールでしかコードを反映させることが出来ません・・・

Question

スマホの時だけ、videoタグの中に再生ボタンが出るのですが、サムネが隠れてしまうので非表示にしたい、と思っております。

スマホの検証ツールでは反映されるのに実際にcss入力しても非表示にはならず困っています・・・
キャッシュクリアして都度確認しているのですが・・・
動画も取ってみたのですが、どこが間違っているかご教授お願いします（泣）
[検証ツール動画](https://d.kuku.lu/f70656002)

該当のソースコード

試したこと

①検証ツール◯　→実際✕
button.center {
 visibility: hidden !important;
}

②検証ツール◯　→実際✕
.play-pause center paused {
 visibility: hidden !important;
}


③とにかくたくさんクラス名を入れてみましたが反映されず・・・
.fusion-video fusion-selfhosted-video .video-wrapper .media-controls-container .visible-controls-bar .media-controls inline ios users-ltr-user-interface-layout-direction .play-pause center paused {
 visibility: hidden !important;
}

④videoタグにID名(introduction-video)付けて・・・
.introduction-video　button.center {
 visibility: hidden !important;
}

Answer 1

スマホというのがiosとして話します。

<div class="video_div">
  <video id="video" poster="poster.jpg" src="video.mp4"></video>
</div>

@media screen and (max-width: 768px) {
  .video {
    width: 100%;
    height: 54.6vw; /*高さはご自分で調節してください*/
    background: url(background.png) no-repeat;
    background-size: 100%;
  }
  video {
    width: 100%;
    display: none;
  }
}

$(function(){
  $('.video').click(function() {
    vidplay();
  });
 
  function vidplay() {
    var $video = $('#player');
    var video = $video.get(0);
    $video.parent().toggleClass('stop')
    if (video.paused) {
      video.play();
    } else {
      video.pause();
    }
  }
});

行っていることとしては、cssでvideoタグを非表示、それに背景("background.png")を指定しています。
jsでは親要素がクリックされたときに動画を再生するようになっています。

Comments

[maritomo]

ご回答ありがとうございます！

そのままコピペして使わせていただきました！
ただ、今度はvideo自体が表示されなくなりました・・・

posterやsrc、backgroundのurlだけ変更して他はそのままなのですが、、、

[Ftps]

返信おそくなりました。すいません。
もし可能でしたらChrome等のDeveloperツールで動画が読み込まれているか確認していただけますか？