質問編集履歴

2 iframenを過去込んでいるDivに-webkit-overflow-scrolling: touch;を指定する

Alice_W

Alice_W score 7

2017/11/27 16:01  投稿

jQueryプラグインSlickで、YouTubeの動画がスワイプできない
###前提・実現したいこと
  jQueryプラグインSlickで、YouTubeの動画をiframeで埋め込んでスライドさせているのですが、
動画部分(iframe部分)だけスワイプが効きません。
(※テキストを入れている部分はフリックできるので、フリック自体は有効になっている)
動画部分をスワイプしても横にスライド出来る様にしたい。
###発生している問題・エラーメッセージ
Youtubeの動画部分(iFrame部分)のスワイプが効かない
###該当のソースコード
【HTML】
           <section class="youtube">
               <div id="youtube" class="[% subTitle %] clearfix">
                   <h3>動画</h3>
               </div>
               <div class="slick_container">
               <ul class="singleSlider">
                   <li>
                       <div class="youtubeMovie">
                           <iframe src="https://www.youtube.com/embed/eq0PlFD9wbE?rel=0&amp;showinfo=2" frameborder="0" modestbranding="1" allowfullscreen></iframe>
                       </div>
                       <div class="youtubeTitle">
                           動画タイトル
                       </div>
                   </li>
               </ul>
               <div id="arrows">
                   <div class="slick-next">
                       <img src="/sp/img/slick/slideNext.png" alt="&gt;">
                   </div>
                   <div class="slick-prev">
                       <img src="/sp/img/slick/slidePrev.png" alt="&lt;">
                   </div>
               </div>
               </div>
               <div class="youtubeText indent1">※注意事項</div>
           </section>
【javaScript】
$(function() {
   $('.singleSlider').slick({
   });
});
###試したこと
swipe:true,を指定する
iframenを過去込んでいるDivに-webkit-overflow-scrolling: touch;を指定する  
###補足情報(言語/FW/ツール等のバージョンなど)
jQueryバージョン:1.11.2
  • JavaScript

    38578 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    13559 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • YouTube

    327 questions

    YouTubeとはユーザーがビデオをアップロード・共有・閲覧できるビデオ共有ウェブサイトです。

  • YouTube API

    301 questions

    YouTube APIはYouTubeのビデオコンテンツと機能性をウェブサイト、アプリケーション、デバイスに統合することを可能にします。

1 閉じDivが一つ多かったため消去しました

Alice_W

Alice_W score 7

2017/11/27 12:56  投稿

jQueryプラグインSlickで、YouTubeの動画がスワイプできない
###前提・実現したいこと
  jQueryプラグインSlickで、YouTubeの動画をiframeで埋め込んでスライドさせているのですが、
動画部分(iframe部分)だけスワイプが効きません。
(※テキストを入れている部分はフリックできるので、フリック自体は有効になっている)
動画部分をスワイプしても横にスライド出来る様にしたい。
###発生している問題・エラーメッセージ
Youtubeの動画部分(iFrame部分)のスワイプが効かない
###該当のソースコード
【HTML】
           <section class="youtube">
               <div id="youtube" class="[% subTitle %] clearfix">
                   <h3>動画</h3>
               </div>
               <div class="slick_container">
               <ul class="singleSlider">
                   <li>
                       <div class="youtubeMovie">
                           <iframe src="https://www.youtube.com/embed/eq0PlFD9wbE?rel=0&amp;showinfo=2" frameborder="0" modestbranding="1" allowfullscreen></iframe>
                       </div>
                       <div class="youtubeTitle">
                           動画タイトル
                       </div>
                   </li>
               </ul>
               <div id="arrows">
                   <div class="slick-next">
                       <img src="/sp/img/slick/slideNext.png" alt="&gt;">
                   </div>
                   <div class="slick-prev">
                       <img src="/sp/img/slick/slidePrev.png" alt="&lt;">
                   </div>
               </div>
               </div>
               <div class="youtubeText indent1">※注意事項</div>
           </div>  
           </section>
【javaScript】
$(function() {
   $('.singleSlider').slick({
   });
});
###試したこと
swipe:true,を指定する
###補足情報(言語/FW/ツール等のバージョンなど)
jQueryバージョン:1.11.2
  • JavaScript

    38578 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    13559 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • YouTube

    327 questions

    YouTubeとはユーザーがビデオをアップロード・共有・閲覧できるビデオ共有ウェブサイトです。

  • YouTube API

    301 questions

    YouTube APIはYouTubeのビデオコンテンツと機能性をウェブサイト、アプリケーション、デバイスに統合することを可能にします。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る