質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.52%

Colorboxを設置し動画ポップアップができるようにたら、スマホサイトのメニューボタンがクリックできなくなったので改善したい。

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 754

suzuri

score 4

困りごと①

サイト訪問時にYouTubeをポップアップさせる(自動再生ではない)ために、Colorboxを設置

動画を閉じたあと、メニューボタンを押し、メニューバーから別ページに飛ぶ

再度メニューボタンを押したら反応しなくなってしまった。
(再読み込みやcookieを削除しても直りませんでした)

ツイッターなど外部サイトに飛んだ後に戻ってきても同じ現象が起こりました。

困りごと②

ポップアップの動画サイズを、スマホで見たときにもちょうどいいサイズにしたいですが、
$(function(){
jQuery('.colorbox').colorbox({
open:true,
iframe: true,
innerWidth: 650, /* 任意の数字 */
innerHeight: 350 /* 任意の数字 */
});
部分のinnerWidth,innerHeightを90%などに変えても反映されません。

困りごと①について補足

設置してくれた友人も、原因がわからないようでした。
当初友人はiPhone7だとその現象は起こらないと言っていまして、
私のiPhineXsだけかとおもっていたのですが、
PCサイトの画面幅を小さくして確認しても、やはりメニューボタンが押せなくなっていました。

困りごと②について補足

これは友人から、意外と難しいと言われておりました(iframeの挙動が〜と言ってました)。
もしかしたらCSSの方で問題があるかもしれませんが、とりいそぎhtmlだけ載せます。

コード

head部分にこちらを入れており、

<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="css/colorbox.css">
<!-- jQuery Version 3.1.0 -->
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/jquery.colorbox.js"></script>
<script src="js/script.js"></script>


</head>と<header>の間にこちらを入れました。リンクはフェイクです。

 <div id="wrapper">
      <main>
          <a href="https://www.youtube.com/embed/#######?rel=0&amp;autoplay=1;" target="_blank" class="colorbox"></a>

そして</footer>から下がこうなっております。

</footer>
<div class="totop"><a href="#"><img src="images/totop.png" alt="ページのトップへ戻る"></a></div><!-- /.totop -->
  </div>
<script>
$(function(){
$('a[href^="#"]').click(function(){
var speed = 500;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});
});

            $(function(){
                //Examples of how to assign the Colorbox event to elements
                $(".youtube").colorbox({iframe:true, innerWidth:"70%", innerHeight:"70%"});                
                $("#click").click(function(){ 
                    $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
                    return false;
                });
            });


$(function(){
  jQuery('.colorbox').colorbox({
    open:true,
    iframe: true,
    innerWidth: 650, /* 任意の数字 */
    innerHeight: 350 /* 任意の数字 */
  });
});
</script>
</html>

今回関係ないが追加で聞きたい事

そもそも、今作っているサイトはなぜかiPhoneXsのSafariだけヘッダーにあるツイッターボタンなどが消えてしまう(Chromeだと表示される)といった現象が起こるのですが、特定の機種で表示や挙動がおかしい場合、皆様どう対処していらっしゃるのでしょうか、、?


情報が不足している場合、ご連絡お願い致します。
本当に初心者で、調べながら作っておりますが限界です。。

どなたかお優しい方、お知恵を貸してください。。
よろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • m.ts10806

    2019/08/02 15:21

    >全くの初心者です、助けてください。
    「初心者アイコン」をつけるだけで良いと思います。
    ※あまり初心者というのも書かれても実際の要件と関係があるわけではないのでわざわざ書かなくて良いと思います

    キャンセル

  • suzuri

    2019/08/02 15:56

    使い方がわかっておらず、マークが付けられる事を初めて知りました。
    ご親切にありがとうございました。

    キャンセル

  • m.ts10806

    2019/08/02 15:57

    質問は編集できますので適宜ご対応いただければと

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
  • トップ
  • HTMLに関する質問
  • Colorboxを設置し動画ポップアップができるようにたら、スマホサイトのメニューボタンがクリックできなくなったので改善したい。