締切済み

ＪＰＧ写真の一部にユーチューブ動画を設置したい

2014/01/11 16:35

ホームページでＪＰＧ写真の一部にユーチューブ動画を設置したいのですが可能でしょうか？ホームページのメイン写真(清流の写真)の右下にユーチューブを設置したいと思うのですが元々私の作ったホームページではないので、へたに今現在の仕様を変えるわけにもいきません。どうやればよいのでしょうか？設置する詳しい位置は、http://www.kumano-meisui.jp/　のトップページ <div id="idWrap"> <div id="idHeader02"> <div id="idLogo02"><img src="images/top04.png" width="457" height="210" alt="" border="0" /></div> としている位置です。

-t-
お礼率100% (18/18)

CSS
回答数1
ありがとう数2

回答全件

Youtubeの共有埋め込みコードをコピーペーストしてください。

2014/01/11 17:02

みんなの回答 （1）
専門家の回答

みんなの回答

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2281)

2014/01/11 17:02 回答No.1

Youtubeの共有埋め込みコードをコピーペーストしてください。

質問者

お礼 2014/01/12 15:34

回答ありがとうございました。レイヤーを使い、その中に埋め込みコードをペーストしたらうまくいきました。私の使っているホームページ作成ソフトと前任者のソフトが違い、読み込みにエラーが返ってきてたのですが、なんとかなりました。

全文を見る

ログインすると、全ての回答が全文表示されます。

関連するQ&A

スタイルシートでフレーム枠を隙間なくピタリとつける。
よろしくおねがいします。 http://www.sonzai.net/test/test.html 参考URL↑ 中央に<iframe>を置き、それを囲むようにフレームを設置したいのですが、下辺だけ微妙に離れてしまいます。【HTML】 <div id="subnavibar"> <p><img src="images/top/event.png" width="220" height="50" /></p> <img src="images/top/event.png" width="10" height="300" /><iframe src="a.html" width="200px" height="300px" scrolling="yes" frameborder="0" name="side"></iframe><img src="images/top/event.png" width="10" height="300" /> <p><img src="images/top/event.png" width="220" height="20" /></p> </div> 【css】 #subnavibar { width: 240px; float: left; background-color: #ffffff; height: 100%; } 原因としては、何があるでしょうか？
- ベストアンサー
- HTML
センタリングのＨＴＭＬの挿入場所
お世話になっております。前回の質問の追加をしようとしたのですが、うまくできず、新たにスレッドを立てました。すみません。以下のＨＴＭＬは横並びに写真を載せたもの（数行あります）です。（上部に文章を載せるための式がありますが、カットしています。）このプログラムのどこにセンタリングの式を入れたらいいのか、私の知識ではわかりませんでした。またご教示もらえると助かります。よろしくお願いします。 </DIV> <DIV style="top : 1313px; </DIV> <DIV style="top : 1473px;left : 327px; position : absolute; z-index : 3; " id="Layer8"><IMG src="button2.gif" width="81" height="35" border="0" alt="Ｂａｃｋ"></DIV> <DIV style="top : 1060px;left : 21px; position : absolute; z-index : 8; width : 698px; height : 123px; " id="Layer6"> 　 <IMG src="DSC_19711.jpg" border="0" width="160" height="106"> <IMG src="DSC_20401.jpg" border="0" width="160" height="106"> <IMG src="DSC_20541.jpg" border="0" width="160" height="106"> <IMG src="DSC_21231.jpg" border="0" width="160" height="106"></DIV> <DIV style="top : 883px;left : 15px; position : absolute; z-index : 7; width : 649px; height : 165px; " id="Layer5"> 　　 <IMG src="DSC_19311.jpg" border="0" width="160" height="106"> <IMG src="DSC_19381.jpg" border="0" width="160" height="106"> <IMG src="DSC_19411.jpg" border="0" width="99" height="149"> <IMG src="DSC_19631.jpg" border="0" width="160" height="106"></DIV> <DIV style="top : 572px;left : -3px; position : absolute; z-index : 5; " id="Layer3"> <DIV> <TABLE border="0" cellpadding="15" width="725" height="147"> <TBODY> <TR> <TD height="113" width="549" align="center" style="position : relative;table-layout : auto;"> 　　 <IMG src="DSC_17481.jpg" border="0" width="160" height="106"> <IMG src="DSC_18051.jpg" border="0" width="160" height="106"> <IMG src="DSC_18151.jpg" border="0" width="160" height="106"> <IMG src="DSC_18351.jpg" border="0" width="160" height="106"></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> <DIV style="top : 729px;left : 12px; position : absolute; z-index : 6; " id="Layer4"> <DIV> <TABLE border="0" cellpadding="15" width="725" height="147"> <TBODY> <TR> <TD height="113" width="549" align="center" style="position : relative;table-layout : auto;"> <IMG src="DSC_18421.jpg" border="0" width="160" height="106"> <IMG src="DSC_18641.jpg" border="0" width="160" height="106"> <IMG src="DSC_18941.jpg" border="0" width="160" height="106"> <IMG src="DSC_19201.jpg" border="0" width="160" height="106"></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> </BODY>
- ベストアンサー
- ホームページ作成ソフト
IE7で表示すると画像に隙間があきます。
WEBサイトを作っているのですがIE７で表示すると画像と画像の間にスペースが出来てしまいます。他のブラウザだとスペースが出来ないのですが原因は何なんでしょうか？ HTML <div id="sidebar"> <div id="sidebar-bg"> </div> <div id="image-navigation"> <div class="navi"> <ul> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="39" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> </ul> </div> </div> </div> CSS #sidebar{ width: 200px; float: left; } #sidebar-bg{ background-color: #FFF; filter:alpha(opacity=50); -moz-opacity: 0.5; opacity:0.5; position:absolute; left:0; top:42px; z-index:-1; width: 200px; height:100%; } ul, li { margin:0; padding:0; list-style:none; } #image-navigation ul li a { display:block; width:200px; }
- ベストアンサー
- HTML
同じjqueryを２つ並べて動かしたいけど動かない
いつもお世話になっています。 http://39kn.com/2011/06/05/5528/ のものを横に並べて動かしたいのですが下のソースの書き方をすると手前だけ動いて、２つめは動きません。どうすれば動きますか？？理想は■が１つのスライダーデモの部分だとすると、■■と横に並ぶ形で使いたいです。 <body> <div class="1"> <div id="scroller"> <div class="scroller-title"> <span class="left">ドメイン＆レンタルサーバー</span> <span class="right"> <div id="controller"> <div id="stop_scroll_cont"><a id="stop_scroll"><img src="images/stop.png" align="absmiddle" /></a> Stop Scroll</div> <div id="play_scroll_cont"><a id="play_scroll"><img src="images/play.png" align="absmiddle"/></a> Play Scroll</div> </span> </div> </div> <div id="Vertical"> <ul id="TickerVertical"> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> </ul> </div> </div> <div class="2"> <div id="scroller"> <div class="scroller-title"> <span class="left">ドメイン＆レンタルサーバー</span> <span class="right"> <div id="controller"> <div id="stop_scroll_cont"><a id="stop_scroll"><img src="images/stop.png" align="absmiddle" /></a> Stop Scroll</div> <div id="play_scroll_cont"><a id="play_scroll"><img src="images/play.png" align="absmiddle"/></a> Play Scroll</div> </span> </div> </div> <div id="Vertical"> <ul id="TickerVertical"> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> </ul> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
同HTML内で複数のJavaScriptを設置
●JavaScriptを使用して、再生時間の異なったスライドショーを同時再生したい (ｊｓ1とｊｓ2の画像を重ねて、アナログ時計が動くようなスライドショーにしたい) ●現状：どちらか一方の画像しか動かない（ソースの後に記述したｊｓのみ動く）調べたところによると、jQueryを使用すれば可能との事で色々なサイトで調べ、試行錯誤したのですがうまく動きません。（参考にさせて頂いたサイト様：http://black-flag.net/jquery/20110525-3120.html） jQueryを使用しなければ、同時再生はできないのでしょうか？そうなると、以下のHTML、CSSなどを根本から変える必要があるように思っています。 ※実際に上記のサイトを参考に行ってはみたのですが・・・力不足で解決できませんでした。初歩的な質問かとは思いますが、ご指摘頂ければと思います。よろしくお願い致します。＿＿＿＿＿＿＿＿＿＿＿＿＿　　　XHTML　　　　＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ポートフォリオ</title> <link href="base.css" rel="stylesheet" type="text/css" media="all" /> <link href="top.css" rel="stylesheet" type="text/css" media="all" /> <script type="text/javascript" src="portfolio.js"></script> <script type="text/javascript" src="portfolio2.js"></script> <noscript> JavaScript対応ブラウザで表示してください。 </noscript> </head> <body onload="setTimeout('timerImg()', 3000);"> <body> <div id="header"> <img src="portfolio/logo2.png" alt="ヘッダー"></div> <div id="wrapper"> <div id="photo1"> <img name="img/1.png" src="img/1.png" alt="長針"></div> <div id="photo4"> <img name="img2/1.png" src="img2/1.png" alt="短針"></div> <div id="photo2"> <img src="portfolio/tokei.under.png"　alt="時計柄"></div> <div id="photo3"> <img src="portfolio/tokei.logo.png"　alt="ロゴ"></div> <ul id="contens-nav"> 　<li id="home"><a href="portfolio.html">HOME"</a></li> </ul> <ul id="contens-nav2"> 　<li id="works"><a href="works.html">WORKS"</a></li> </ul> <ul id="contens-nav3"> 　<li id="about"><a href="about.html">ABOUT"</a></li> </ul> <ul id="contens-nav4"> 　<li id="contact"><a href="contact.html">CONTACT"</a></li> </ul> </div> </body> </html> ＿＿＿＿＿＿＿＿＿＿＿＿＿　　　CSS（base）　　　＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ @charset "UTF-8"; * { margin:0; } body { font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳＰゴシック", "MS PGothic", sans-serif; line-height: 1.5; } div#wrapper { position:relative; width: 844px; left: 50%; margin-left: -422px; } div#photo1 { position: absolute; left: 50%; height: 100%; width: 844px; margin-left: -422px; z-index: 3; } div#photo4 { position: absolute; left: 50%; height: 100%; width: 844px; margin-left: -422px; z-index: 2; } div#photo2{ position: absolute; left: 50%; height: 100%; width: 844px; margin-left: -422px; z-index: 1; } div#photo3{ position: absolute; left: 50%; height: 100%; width: 844px; margin-left: -422px; z-index: 4; } ＿＿＿＿＿＿＿＿＿＿＿＿＿　　　ｊｓ　1　　　＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ // JavaScript Document  ＿＿＿＿＿＿＿＿＿＿＿＿＿　　　ｊｓ　2　　　＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ // JavaScript Document 
- ベストアンサー
- JavaScript
横並びの写真の上下に複数行の説明文を付けたい。(再質問)
横並びの写真の上下に複数行の説明文を付けたい。(再質問) 前回中途半端な質問をしてしまいましたので、改めて質問し直します。横並びの写真の説明文をその写真の上下に掲載したいのですが、 <Table>を使用せずに、各画像の上下に幅に合わせて個別の複数行の文章をつけることできないでしょうか? 私の場合３画像を次のとおり、 <DIV ALIGN="center"> <IMG SRC="images/a.jpg" WIDTH="150" BORDER="2"> <IMG SRC="images/b.jpg" WIDTH="200" BORDER="2" HSPACE="50"> <IMG SRC="images/c.jpg" WIDTH="200" BORDER="2"> </DIV> ２画像の横並びを次のとおりに表示しています。 <DIV ALIGN="center"> <IMG SRC="images/d.jpg" WIDTH="300" BORDER="2" HSPACE="40"> <IMG src="images/e.jpg" WIDTH="400" BORDER="2" HSPACE="40"> </div>
- 締切済み
- HTML
コンテンツの配置について
Yahoo!のようにコンテンツ全体を中央によせ、さらに、それぞれのボックスの表示位置を縦横で指定したいのですが以下のようなソースではうまくいきません。対処方法をご教示下さい。よろしくお願いします。 <STYLE TYPE="text/css">  </STYLE> <TITLE></TITLE> </HEAD> <BODY> <DIV id="main"> <DIV id="contentsA"> <DIV id="contentsB"> <IMG src="image3.gif" border="0" width="50" height="50"> <IMG src="image2.gif" border="0" width="50" height="50"> <IMG src="image1.gif" border="0" width="50" height="50"> </DIV> </DIV> </DIV> </BODY>
- ベストアンサー
- HTML
HTMLタグ
画像にもありますが、取り扱い商品・液晶モニタ・パソコンパーツなどの横に横2列縦3列のテーブル、その横に縦５列横1列のテーブルを付けたいのですが、どうしてもわかりません。わかる方居ましたらお願いします。現在こんな感じです <p><font color="#f70006">   <strong>他には無いアイテムがここにはあります</strong> </font> <br> <img style="WIDTH: 983px; HEIGHT: 102px" border="0" alt="" src="素材/top.png" width="1000" height="118"><br> <img border="0" alt="" src="素材/home.png" width="200" height="73"><img border="0" alt="" src="素材/商品一覧.png" width="200" height="73"><img border="0" alt="" src="素材/輸入.png" width="200" height="73"><img border="0" alt="" src="素材/買付.png" width="200" height="73"><img style="WIDTH: 169px; HEIGHT: 73px" border="0" alt="" src="素材/問合.png" width="170" height="73"><br> <br> <br> <br><img border="0" alt="" src="素材/取り扱い.png" width="164" height="49"><br> <img border="0" alt="" src="素材/液晶.png" width="164" height="49"><br> <img border="0" alt="" src="素材/ａｐａｒｅｒｕ.png" width="164" height="49"><br> <img border="0" alt="" src="素材/pasokon.png" width="164" height="49"><br> <img border="0" alt="" src="素材/周辺機器.png" width="164" height="49"><br> <img border="0" alt="" src="素材/マルチメディア.png" width="164" height="49"><br> <img border="0" alt="" src="素材/自動車.png" width="164" height="49"><br> <br> <br> <br> <img border="0" alt="" src="素材/サポート.png" width="166" height="63"><br> <img border="0" alt="" src="素材/輸入について.png" width="166" height="63"><br> <img border="0" alt="" src="素材/お問い合わせ.png" width="166" height="63"><br> <img border="0" alt="" src="素材/会社概要.png" width="166" height="63"> </p> 他にいい作り方など、オススメ等ありましたら何でもお願いします
- ベストアンサー
- その他（インターネット・Webサービス）
CSSで縦長・横長の写真を一定に並べたい
写真のギャラリーのようなものを作成しています。写真のサムネイルが200×150pxのものと150×200pxのものがあり、並びはランダムです。この写真を正方形の方眼紙に並べるように配置したいと思っています。テーブルで作成すれば楽なのですが、文書構造的にCSSで行いたいと思っています。リストでマークアップして、それぞれのli要素を200pxの正方形にしてから、その中央に画像を表示させたいのですが… 縦長の写真はtext-align:center;で処理ができるので、できましたが、横長写真の上下位置が中央になりません。横長写真が入っているli要素だけに対してクラスを指定すればできそうなのですが、数が多いので、一括で処理できないか、と奮闘しております。試しにli要素に対してline-heightを200pxで指定し、img要素に対してvertical-alignをmiddleで指定してみたのですが、Firefoxではうまくいくものの、IE（8）でNGでした。現在のソースは以下の通りです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ギャラリー</title> <style type="text/css">  </style> </head> <body> <div id="content"> <ul> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> </ul> </div> </body> </html> どなたかお分かりになる方、いらっしゃいましたら、お知恵を拝借できれば幸いです。よろしくお願い致します。
- ベストアンサー
- HTML
jqureryスライドショーが上手くいきません。
こんにちは。 web初心者です。今、jqueryを使いスライドショーを作っているのですが上手く行きません。 5枚の画像を重ねてフェードイン　フェードアウトみたいな形にしてるのですが、最後の画像だけdisplay: none;が適用されなくてきれいに表示出来ません。どなたか詳しい方、宜しくお願い致します。 <HTML> <div id="contents"> <div class="slideshow"> <img src="top30.jpg" width="950" height="450"> <img src="top21.jpg" width="950" height="450" class="alt"> <img src="top20.jpg" width="950" height="450" class="alt"> <img src="top22.jpg" width="950" height="450" class="alt"> <img src="top23.jpg" width="950" height="450" class="alt"> </div> </div> <CSS> #contents { width: 950px; margin-right: auto; margin-left: auto; height: auto; .slideshow { width: 950px; border-top-width: 1px; border-top-style: solid; clear: both; padding-top: 60px; height: auto; position: relative; float: left; } .slideshow img { position: absolute; } .slideshow img .alt { display: none; }
- ベストアンサー
- その他（プログラミング・開発）