WordPressで複数のYouTube動画を切り替えて再生する方法

このQ&Aのポイント
  • WordPressで複数のYouTube動画を同じページで切り替えて再生する方法について知りたいです。
  • 参考サイトではHTMLのコードをコピペして試したが、一部うまくいかなかった。
  • 動画の埋め込みは表示されるが、動画下のリンク先が表示されないなどの問題がある。
回答を見る
  • ベストアンサー

Wordpress 複数のYouTube動画

WEB初心者です。よろしくお願い致します。 複数のYouTube動画をページを変えず、そのエリアで切替えて再生したいのですが、 Wordpressにどのように記載すれば良いでしょうか。 参考として、下記サイトを見つけました。 まさにこのような事がやりたいのですが。 http://3004.jp/web_koto/386/ http://phpjavascriptroom.com/exp3.php?f=include/strm/youtubeiframeplayerapi/loadVideoById.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%3AloadVideoById# このサイトhtmlの記載があったので、それをコピペしてWordpresのサイトに反映させようとしましたが、一部のみ標示されるなどうまくいきません。(動画の埋め込みは標示されるが、動画の下のリンク先が標示されないなど)

  • HTML
  • 回答数1
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
  • tracer
  • ベストアンサー率41% (255/621)
回答No.1

高機能なものを作るならば、サンプルサイトのようにJavaScriptを使ってできますが、表示を切り替えるだけならCSSだけでできます。たとえばCSSだけでつくるSlideShowを参考にしてみると分かりやすいと思います。単にCSSで表示のON/OFFを切り替えるだけですから。

関連するQ&A

  • Maps APIのストリートビュー表示と座標

    以下のサイトのように、右上にストリートビュー解除ボタンと、左の人形マークを表示させる形でウェブサイトに埋め込みたいのですが、、、 http://phpjavascriptroom.com/exp7.php?f=include/ajax/gmapv3/streetview/streetviewpanorama_event.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB# ソースを見ると、head内で座標を指定しています。 これでは、もし10個、100個という複数の埋め込みに適用したい場合、いちいちhead内に座標を追加しなければならないので、効率が悪いです。 この座標指定行[var latlng=new google.maps.LatLng(35.6652470, 139.7123140); ]を省き、座標は記事編集ページ側で表示し、複数の埋め込みに適用させたいです。 様々なサイトを見てきましたが、全てhead内で座標を指定しているものだったので、これは実現不可能なのでしょうか。 head内、または記事編集ページ側で制御できるJavascriptがありましたら教えてください。

  • DWcs4のスニペットにこのJAVAを登録して使用

    すいません。詳しい方いましたら教えてください。 DWcs4のスニペットにこのjQueryを登録して使用はできるものなのでしょうか? http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_imagegallery/pirobox.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB なにぶんJAVAも超初心者なのでよくわからず... お手数をおかけいたしますが宜しくお願いします。

    • ベストアンサー
    • CSS
  • WordPressをwebサイトに組み込む方法

    初めまして。 趣味でWebサイトを制作しているのですが、友人から自分が所属するバンドのサイトを作ってほしいと頼まれDreamWeaverで作成しました。 友人が自分で更新ができるように(友人はWeb制作に関しては全くの知識0です)新着情報など更新頻度の高い部分だけWordpressなどを設置(埋め込みといった方がいいのでしょうか?)したいと考えています。 けれど、Wordpressの解説書やWebで検索してもあまり外部のサイトへの設置方法などの記述を見つけることができず困っています。 Wordpressを外部サイトへ設置する方法が載っている本やWebページなど心当たりがありましたら、ぜひ教えて頂きたいです。よろしくお願いいたします。 (ちなみに私は以前Wordpressに少し手を出したことがある程度です)

  • ドリームウィーバーcs4のスニペットでjQuery

    すいません。詳しい方いましたら教えてください。 ドリームウィーバーcs4のスニペットにこのjQueryを登録して使用はできるものなのでしょうか? http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_imagegallery/pirobox.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB なにぶんjQueryとjavaスクリプトが超初心者なのでよくわからず... お手数をおかけいたしますが宜しくお願いします。

    • ベストアンサー
    • CSS
  • 下記のサイトはWordPressでできていますか?

    下記のサイトはWordPressでできていますか? http://www.cetkarnataka.in/ http://www.cetkarnataka.in/sitemap/ http://www.cetkarnataka.in/%E7%9C%8B%E8%AD%B7%E5%B8%AB%E3%83%8F%E3%83%AD%E3%83%BC%E3%83%AF%E3%83%BC%E3%82%AF%E7%97%85%E9%99%A2%E5%8B%9F%E9%9B%86%E6%8E%A1%E7%94%A8%E6%B1%82%E4%BA%BA/%E6%9D%B1%E4%BA%AC%E9%83%BD/%E9%83%BD%E5%86%85%EF%BC%92%EF%BC%93%E5%8C%BA/

  • ふきだし型のツールチップがIEだと

    こちらのサイトの http://phpjavascriptroom.com/?t=ajax&p=jquery_plugin_tooltip Side Navigation Tooltip / Popup Bubble を使用しているのですが、 http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_tooltip/sidenavigation_tooltip.inc&ttl=Side+Navigation+Tooltip+%2F+Popup+Bubble%E3%81%AE%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB ふきだしに入れている内容が多いため、縦の長さがナビより長い状態です。 一度マウスオンしてふきだしを出した後、マウスをはなすと本来なら ふきだしが隠れるのですが、文字だけが見えた状態になります。 safariやfirefox、クロムではちゃんと隠れますが、IEだけは触れた後も ナビの下から文字が見えた状態になってしまいます。 IEのバグ?というかIEには対応していないのでしょうか。 どうかご回答お願い致します。 また、探したのですがもし似たようなツールチップがございましたら 教えて頂けると助かります。 どうぞ宜しく御願い致します。

  • セレクトボックス幅を小さく、選択肢の文字は全て表示

    セレクトボックスの幅を小さめに指定し、選択肢の文字列は全て表示できる方法を探しています。 http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_forminputcustomize/dropdownchecklist.inc&ttl=%90%DD%92u%83T%83%93%83v%83%8B 上記サイトの「長いテキスト、短いコントロール」のプルダウンのようにする方法が分かりましたら、ご教示よろしくお願いします。

  • WordPressとはなんですか?。

    最近「WordPress/CMS」という言葉を良く聞きます。 これはなにかHTMLを知らなくてもWebサイトが構築・管理できるというような話を聞くのですが、すると「HomepageBuilder」みたいなものなのでしょうか。 WordPressの公式サイト?を見ると 「WordPress (ワードプレス) は、オープンソースのブログ/CMS プラットフォームです。セマンティック Web、コードやデザインの美しさ、Web 標準、ユーザビリティなどを意識して開発されており・・」 などと書かれています。 http://ja.wordpress.org/ 書かれている単語が全く理解できません(^^)。 「オープンソースの」ということはLinuxみたいな一種のOSなのでしょうか?。てか、そもそも「プラットフォーム」の意味がわかりませんが。 「ブログ」と明記ありますが、ブログしか書けないのですか?。私はブログなど興味ないので一般的なサイト構築・管理に対応しないならゴミですが。 「デザインの美しさ」ってどうしてソフトで実現可能なのでしょうか? 「CMS」も下記サイトを読んでもちんぷんかんぷんです。 http://e-words.jp/w/CMS-1.html 「CMSを導入すれば、テキスト制作者はHTMLなどの知識を習得する必要はなく、デザイナーはテキストが更新されるたびに作業を行う必要はなくなり、それぞれ自らの作業に集中することができる。また、サイト内のナビゲーション要素なども自動生成するため、ページが追加されるたびに関連するページにリンクを追加するといった煩わしい作業からも解放される。」 ってそんな夢のようなソフトがあるのなら、もうCSSやjavascriptを学んでエディタでHTML打つのなんてやめようって思うのですが。 まあ、私が作るサイトなど大企業のそれとは比較にならない小規模なものですが、それでも「フリーソフトもある」などと言われると心穏やかではありません。 個人的なサイト管理などで、そういうCMS?とやらができる「フリーソフト」があるなら、ぜひご紹介下さい。 それとも私が何か誤解しているなら、その辺かみ砕いて解説していただけると非常にありがたいです。 よろしくお願いいたします。

  • jQueryUI自動スライド右側リストを増やしたい

    http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_imagegallery/featured_content_slider.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB 上記の自動スライドなのですが、例では4項目なのですが、10項目くらいに 増やして利用したいと思っています。 単純に10個に増やすと、左の画像部分はきちんと10個目まで表示されますが、 右側は6個目から隠れたままで表示されません。 #featured ul.ui-tabs-navのheightを300pxにして、overflow:hiddenに しています。 6個目からもカーソルと連動して右のリストを表示して動かすにはどのように したらいいのでしょうか… また、右の動くカーソルを左の画像に重なるようにはできないでしょうか? 背景のしろが目立ちすぎる気がして… 宜しくお願いいたします!!

    • ベストアンサー
    • CSS
  • wordpressの管理パネルの一般設定に、サイトURLの記入項目が表

    wordpressの管理パネルの一般設定に、サイトURLの記入項目が表示されません。 wordpressでサイトを作りましたが、サイトのルートにいたしたく、wordpress codexというサイトの、「wordpressを専用ディレクトリに配置する」という項目のページを参照しながら作業を進めようとしました。 http://wpdocs.sourceforge.jp/WordPress_%E3%82%92%E5%B0%82%E7%94%A8%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA%E3%81%AB%E9%85%8D%E7%BD%AE%E3%81%99%E3%82%8B#.E3.83.87.E3.82.A3.E3.83.AC.E3.82.AF.E3.83.88.E3.83.AA.E6.A7.8B.E6.88.90.E4.BE.8B しかし、管理パネルから一般設定のページでURLを変更する際、その変更をするための ・wordpressのアドレス ・ブログのアドレス という項目が表示されず、変更することができません。 以前はたしか表示されていたと思うのですが、 目的の作業をするために色々なページをいじっていたためか、いつの間にか表示されなくなってしまいました。 管理パネルは通常にログインすることはできます。 一般設定のページに上記の2項目の欄を表示するにはどうしたら良いでしょうか。 初歩的なミスでしたら申し訳ございませんが、どなたかご教授くださいませ。