iframe内のshadowbox プレイヤー位置

前へ 次へ
このQ&Aのポイント
  • iframe内でshadowboxを使って動画を再生する方法について
  • iframe内の画像をクリックするとshadowboxが機能するが、プレイヤーの位置がフレーム中央に表示されるため、調整方法を知りたい
  • CSSやJavaScriptでの調整が難しく、shadow.jsのソースも理解できない
回答を見る
  • ベストアンサー

iframe内のshadowbox プレイヤー位置

こんばんわ。 　iframe内でshadowboxを使って動画を再生しようと考えています。 iframeはheight1000px位の縦長です。iframe内の画像をクリックするとshadowboxが機能し、動作はするのですがプレイヤーの位置がフレーム中央に表示されロールしないと見れません。 　ページの中央にプレイヤーが配置されるようにわざわざプログラミングされているのは理解できますが、なんとかこのプレイヤーの位置を調整できないものでしょうか。できればiframeページの上部に配置したいのです。 cssでやってもうまくいかず、javascriptも詳しくなく、shadow.jsのソースを見てもわかりません。 もしご存知の方がいらっしゃればお手数ですが、宜しくお願いします。

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

  • ベストアンサー
回答No.1

コードを解析して親フレームのウィンドウサイズを取得し放り込むのが良いのかと思いますが 多分、複雑な上に難しいかと思いますのでcssを無理やり変更する形で…… #sb-wrapper { position: absolute; visibility: hidden; width: 100px; top: 50px !important; } iframe内、画面の上から50pxに表示されるかと…… 画面の中心に必ず持って行きたい！、と言うことであれば shadowboxのcssからsb-wrapperへのstyleを削除し、 jqueryもしくはjavascriptで親フレームのサイズを取得して 全てのstyleを指定してやらないといけないかと思います。 別方法としてiframe内ではなく 親でjqueryを持っておき、子でトリガーされたら親側で実行するようにするとか……

kirinuma
質問者

お礼

CyberCypherさん、回答ありがとうございました。 何を勘違いしてか、ＣＳＳで指定するところ間違ってました。気づいた時には 丁寧な回答を頂いてて誠に頼もしくありがたい次第でした。 今後ともできればご教授宜しくお願いします。m(..)m

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • shadowbox について

    最近「shadowbox」というJSが 3.0b にバージョンアップされ、それを使っている者です。 http://www.shadowbox-js.com/ そこで質問です。 画像とYOUTUBE動画はしっかりJSが働きますが、「shadowbox」のウリでもあるイメージマップとサイト表示ができません。 head内記述は以下の通りです。 <link rel="stylesheet" type="text/css" href="***/shadowbox/shadowbox.css"> <script type="text/javascript" src="***/shadowbox/shadowbox.js"></script> <script type="text/javascript"> Shadowbox.init({ language: "en", players: ['img', 'html', 'iframe', 'qt', 'wmp', 'qtwmp', 'swf', 'flv'] }); </script> 「shadowbox.css」と「shadowbox.js」は公式HPで使用されている物をそのままコピーした物を使っています。 http://www.shadowbox-js.com/src/shadowbox.css http://www.shadowbox-js.com/src/shadowbox.js イメージマップについては、公式サイトのソースでは画像アドレスに対して「rel="shadowbox"」の記述が全くないのにJSが動作しているという謎仕様。 同じようにしたり、rel属性を付けても画像が普通に表示されるだけでJSが働きません。 htmlについては、リンクアドレスが「***.html」の場合のみJSが働きますが、「***.co.jp」などの場合は働きません。 色々調べたのですが、3.0bは最近公開された事もあってか、日本語で説明されたHPが見あたりません。 海外サイトを翻訳したりして調べても、そもそも当方はJS初心者なので理解に苦しんでおります。 おそらく「shadowbox.js」が原因だとは思うのですが、行数も多くどこの記述で何が変わるのかさえ判らない状態で困っております。 どなたか、無知な私にご教示願えないでしょうか。

  • shadowbox3.0.3で画像が開きません

    環境 Mac OSX DreamweaverCS5.5 上記環境でサイト制作しまして、Dwの"ブラウザでプレビュー"の使用してSafariとFirefoxで問題なく動作、表示する事を確認した後、FC2ホームページにアップロードしたところshadowbox.jsが動作せずに困っております。 具体的には <a href="image/image01.JPG" rel="shadowbox"><img src="image/image01_thumb.jpg"></a> とゆうコードでサムネイル画像をクリックして拡大表示したいのですが、クリックするとブラウザが暗転し"Loading"の文字とアニメーションが表示されますが、そこから進まず画像が表示出来ません。 またshadowboxの.jsファイルと.cssファイルを読み込む記述は以下のようになってます <link rel="stylesheet" type="text/css" href="js/shadowbox/shadowbox.css" /> <script type="text/javascript" src="js/shadowbox/shadowbox.js"> </script> <script type="text/javascript"> Shadowbox.init({ language: 'ja', players: ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv'] }); </script> これまでshadowboxに関するブログや質問など見てみましたが、特にコードの記述には問題が無さそうに思い、どこに問題があるのか全く分からなくなってしまいました。 これにはどのような問題が考えられるでしょうか？　初歩的な質問だとは思いますがよろしくお願いし致します。

    • ベストアンサー
    • CSS
  • fc2blogでshadowboxを使用したいと思い

    fc2blogでshadowboxを使用したいと思い http://pakun13.blog44.fc2.com/blog-entry-365.html のブログの記事を参考にして、自分のブログに導入しようと考え、記事に書いてあるように、CSSを書き換えて、必要な画像、JSなどをアップロードをし、テンプレートの編集でHTML編集を書き換えて、使用しようとしたのですが、動画がポップアップ表示されませんでした。 参考サイトを順に追っていきますと 最初に参考サイト 1～3に書いてあるように jQueryとShadowbox jsをダウンロードして解凍しました。 次に、参考サイト 4～5 に書いてあるように、LICENSE、README、shadowbox css　以外ををfc2にアップロードして、shadowbox cssをメモ帳で開きに下記の6点を書き換えました。 ○○○○にはアップロード先のURLが入ります。 {background:url(http://○○○○/loading.gif) no-repeat;padding-left:34px;display:inline-block;} {background-image:url(http://○○○○/close.png);} {background-image:url(http://○○○○/next.png);} {background-image:url(http://○○○○/previous.png);} {background-image:url(http://○○○○/play.png);} {background-image:url(http://○○○○/pause.png);} 書き換えたshadowbox cssをfc2にアップロードして、テンプレートの編集で〈/body〉の上に <script type="text/javascript" src="http://○○○○/jquery-1-4-2-min.js"></script> <link rel="stylesheet" type="text/css" href="http://○○○○/shadowbox.css"> <script type="text/javascript" src="http://○○○○/shadowbox.js"> <script type="text/javascript">Shadowbox.init({language: 'ja',players: ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv']}); </script> を貼り付けて更新ボタンを押して、新しく記事を書くで <a rel="shadowbox;width=動画の幅;height=動画の高さ" title="動画のタイトル" href="動画のＵＲＬ"><img src="サムネイル画像のＵＲＬ" width=サムネイルの大きさ border=0 </a> を使用してみましたが、ポップアップされずに、youtubeに飛ばされるだけでした。 知識がないので、参考ブログを参考にして自分なりにやってみましたが、shadowboxを使用する事が出来ませんでした。説明が分かり難いかもしれませんが、時間がありましたら、アドバイスして頂けると有り難いです。

  • CSSを使ってのiframe

    xhtmlとcssでhpを作ってます。 iframeをcssで表現したいんですが、どうしてもフレーム枠に１pxほどの枠が出てしまいますので、それを無くしたいのと、スクロールバーが出ないようにしたいのですが、どのような書き方がベストでしょうか？ どなたかアドバイスをお願いします。 現状では以下の書き方をしております。 -----css----- #top{ float:left; text-align:left; width:300px; } #top_iframe{ overflow:auto; width:300px; height:150px;} -----html----- <div id="top"> <iframe src="xxx.html" title="top">更新</iframe> </div> 希望としては現状の幅300px 高さ150pxで、枠が無くスクロールバーもでないようにしたいのですが・・・ <<当方初心者なので、お返事頂けるさいにはcssとhtmlのタグでご回答願います。>>

    • ベストアンサー
    • HTML
  • iframeについて質問です。

    iframeについて質問です。 取得先のページを全体を読み込むことはできるのですが、 指定したid属性だけを読み込むことってできるのでしょうか。 css、html5で対応できれば嬉しいです。 css、html5でできない場合jsでやり方があれば教えてもらえたら嬉しいです。 よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • iframeの機能をcss(divタグ)で表現する方法

    タイトル通りです。 cssでiframeの機能を使いたいです。 iframeのフレーム内にフレーム外からのリンクを表示する機能なんですが、iframeタグを使わずcssで代替した時の書き方がわかりません。 -----------------------ソース------------------------------ css----------- div.iframe { padding:10px; width:300px; height:200px; border:solid 1px pink; overflow:scroll; } <div class="iframe"> 内容 </div> ----------------------------------------------------------- わかる人がいたら教えて頂きたいです。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • iframe内cssの切り替えが出来ない

    ただいま、styleswitcher.jsを使用しスタイルを動的に切り替えられるページを作成中です。 そこでご質問ですが、iframeを使用しているのですが、スタイルを切り替えてもiframe内のcssは同時に切り替えられません。 どなたか切り替えと同時にiframe内のスタイルも同時に切り替える方法をご存知の方がいらっしゃいましたら教えてください。styleswitcher.jsでなくても構いませんので、よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • ホームページを作っています、ページ内にiframeで他のページを表示さ

    ホームページを作っています、ページ内にiframeで他のページを表示させています。 IEではこのiframeにスクロールバーが出て、縦に長いデータをスクロールして閲覧あせる事が できるのですが、Firefoxだとスクロールバーが出ません・・・ どなたか表示させる方法をご存知でしたら教えてください。 以下HTML記述 <iframe name="iframe4" id="iframe4" frameborder="0" scrolling="yes" src="topix.html" title="※※">※※</iframe> CSS記述 #iframe4{ border-width : 0px 0px 0px 0px; margin-left : 0px; width : 420px; height : 490px; padding-top : 0px; overflow : hidden; margin-top : 0px; margin-right : 0px; margin-bottom : 0px; padding-bottom : 0px; }

    • ベストアンサー
    • HTML
  • iframe内MENU

    ほんと色々お世話になります。 iframeの件でご質問申し上げます。 iframe内に別ページで作成しました。 メニューページを表示させています。 （別ページ作成したｃｓｓmenuを丸投げしている感じです。 <iframe src="css_tatoeba.html"frameborder="0" height="40" scrolling="no" width="554"></iframe>　こんな感じです。） 別ページでリンクを貼り親ページで試してみるとiframe内にリンク先が 一部表示されてしまいます。（レイアウト崩れのような感じで）　iframe内ではなく、新たなページに表示させたいのですがどうすればよろしいのでしょうか？ 色々試したのですが上手くいきません。 教えて頂ければ幸いです。

    • ベストアンサー
    • HTML
  • テーブルの中にiframe

    テーブルの中にiframeをしているのですが どうしてもボタンが右側に少しはみ出ますし iframeは縦400pxを超えるページを表示すると 縦スクロールバーが表示されますが それも右側にはみ出ます。 どうにか800pxの中に収まらないものでしょうか？ また、ボタンのボーダを下記ソースでは消していますが デフォルトで表示される立体感のあるボタンのまま 800pxの中に収めたいです。 HTML5、CSS2.1です。 ご相談お願いします。 <table> <tr style="width: 800px; height: 50px"> <td><input type="button" value="1"/></td> <td><input type="button" value="2"/></td> <td><input type="button" value="3"/></td> <td><input type="button" value="4"/></td> <td><input type="button" value="5"/></td> </tr> <tr style="width: 800px; height: 400px"> <td colspan="5" style="width: 800px; height: 400px"> <iframe src="hoge.htm"></iframe> </td> </tr> <tr style="width: 800px; height: 50px"> <td colspan="5" style="width: 800px; height: 50px"> <p>hoge</p> </td> </tr> </table> ------------------------------------------------------------ table { padding: 0px; margin: 0px; border-style: none; border-width: 0px; } tr td { padding: 0px; margin: 0px; border-style: none; border-width: 0px; } input { border-style: none; border-width: 0px; padding: 0px; margin: 0px; color: Red; width: 160px; height: 50px; font-size: 20px; font-family: HGS明朝B; background-color: transparent; } iframe { padding: 0px; margin: 0px; border-style: none; border-width: 0px; background-color: transparent; width: 800px; height: 400px; }

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する