WordPressの記事内の動画(youtube)を固定したいです！

Question

WordPressでテーマ(https://ja.wordpress.org/themes/baskerville/)
を利用しているものです。
それでnextenglish.netというサイトを構築したのですが、記事内にyoutubeを、
wordpressプラグイン(Featured Video Plus)で埋め込んでいます。
この埋め込んだyoutubeを記事をスクロールして行っても、上部に固定されるようにしたいのですが、お力添えいただけないでしょうか？
目的としては、動画を常に見ながら文章を読んでいきたいためです。

是非よろしくお願いいたします！

Comments

[harashow1701]

常に動画を見ながら文章を読んでもらいたいとのことですが、片目で動画を見て片目で文章を読める人はレアだと思うので、やりたいことから見直した方が宜しいかと思います。

Answer 1

実際に出力されたHTMLが無いと具体的な解答は出来ませんが、動画を囲う要素を position: fixed; にすれば固定出来ます。

.featured-video-plus {
    left: 0;
    position: fixed;
    top: 0;
    width: 500px;
}

【Featured Video Plus plugin by ahoereth】
http://yrnxt.com/wordpress/featured-video-plus/

---

ほかにもJavaScriptを併用するものなど、様々な手法があります。

【[jQuery] 特定の要素内だけスクロールに追随するサイドバーを作る方法 ｜ memocarilog】
http://memocarilog.info/jquery/5511

【第64回 jQueryでつくるスクロール追従メニュー｜コーディング代行ならコーディングファクトリー】
http://coding-factory.com/cm/cm64.html

Comments

[KentaIgarashi]

ご回答ありがとうございます。
無知で申し訳ないのですが動画を囲う要素がどちらなのかわかりませんでした。
プラグインの編集で、
featured-video-plus/styles/html.css の編集を開くと以下のようになっていました。

body.no-js .fvphtml-tab-title {
font-weight: bold;
display: block;
}
body.js .fvphtml-tab-title {
float: left;
padding: 1px 10px 2px;
cursor: pointer;
border-style: solid;
border-color: #ccc;
border-width: 0;
border-right-width: 1px;
border-bottom-width: 1px;
}
body.js .fvphtml-tab-title:hover {
text-decoration: underline;
}
body.js .fvphtml-tab-title.active {
cursor: default;
font-weight: bold;
border-bottom-width: 0;
padding-top: 0;
border-top-width: 1px;
}
body.js .fvphtml-tab-title.active:hover {
text-decoration: none;
}
.fvphtml-tab-body {
clear: both;
padding-top: 5px;
}
.fvphtml-label {
position: relative;
clear: both;
display: block;
}
.fvphtml-label .fvphtml-innerlabel {
display: block;
float: left;
width: 10em;
line-height: 27px;
}
.fvphtml-label .fvphtml-reset {
position: absolute;
top: 0;
left: 9em;
z-index: 1;
line-height: 27px;
}
.fvphtml-pointer-input {
width: 100%;
}

こちらをどうすればよいでしょうか？
よろしくお願いいたします。

[kei344]

コメントではコードブロックが使えないので、コメントを編集してコード部分を消し、質問文にコードブロックで追記してください。（コードを選択して「</>」ボタンを押すとコードブロックになります）

また、CSSには全ての要素が書かれているわけではないので、実際のサイトをみながら確認してください。デベロッパーツールを使えばわかりやすいと思います。

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

【第1回　詳説：デベロッパーツールの使い方：Google Chrome版Firebug：デベロッパーツール取扱説明書｜gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/devtools/0001?page=2