テレビがビデオのフレームとして機能するように、テレビのPNG画像内でビデオを再生しようとしています。
そのようなことを試しましたが、テレビの画像を押し上げて、その下のビデオを再生するだけです。
<img class="tv" src="images/tv.png" alt="Tv">
<video width="320" height="240">
<source src="video/video.mp4" type="video/mp4" />
</video>
</img>
そこに私の道を見つけるのを手伝ってくれませんか？簡単な解決策があると確信しているのですが、どこを見ればよいのか本当にわかりません。どうもありがとう ！
まず第一に、<img>それは他の要素を含むことができない要素であるため、この方法を使用することはできません。
あなたがしなければならないのは、あなたの画像を背景として置き、div正しい位置でビデオを表示することです：
<div id="tv_container">
<video width="320" height="240">
<source src="video/video.mp4" type="video/mp4" />
</video>
</div>
<style>
#tv_container {
background: url('images/tv.png') no-repeat top left transparent;
width: 400px; /* Adjust TV image width */
height: 300px; /* Adjust TV image height */
position: relative;
}
#tv_container video {
position: absolute;
top: 30px; /* Adjust top position */
left: 40px; /* Adjust left position */
}
</style>
またはの代わりにposition: relative;、forposition: absolute;を使用できます（ただし、に要素を追加する場合は、withのトリックの方が適しています。margin: 30px 0px 0px 40px;#tv_container videoposition#tv_container
TV画像はよりも大きいとvideo思いましたが、正しく表示するにはいくつかの調整が必要です。
Guilherme J Santosの回答に触発されて、テレビ画像を上のレイヤーとして使用することをお勧めしますvideo。これにより、厳密な長方形である必要のないテレビ画面で画像を使用できるようになります。もちろん、ビデオの一部はトリミングされますが、テレビ画面のように見えます。
<div id="tv_container">
<video width="320" height="240">
<source src="video/video.mp4" type="video/mp4" />
</video>
</div>
<style>
#tv_container {
width: 400px; /* Adjust TV image width */
height: 300px; /* Adjust TV image height */
position: relative;
}
#tv_container:after {
content: '';
display: block;
background: url('images/tv.png') no-repeat top left transparent;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: 10;
}
#tv_container video {
position: absolute;
top: 30px; /* Adjust top position */
left: 40px; /* Adjust left position */
z-index: 5;
}
</style>
z-indexレイヤー（この場合は#tv_container:after疑似要素）がvideo'sより大きいことを確認してくださいz-index。そして、1つあります。 @brichinsのコメントによると、レイヤーの下でビデオをクリック可能にすることもできます（ありがとう！）。videoクリックできなくなります（レイヤーの下にあるため）
もちろん、テレビの画面部分は透明でなければなりません！
ビデオより少し大きいdivの背景として画像を設定できます。ビデオをdivの中央に配置すると、ビデオを画像でフレーム化するように見えます。
<div id="video_container">
<video width="320" height="240">
<source src="video/video.mp4" type="video/mp4" />
</video>
</div>
CSS：
#video_container {
background-image: url('images/tv.png');
height: 300px;
width: 400px;
}
video {
text-align: center;
/* or
padding: 30px 40px;
*/
}
このようなものを試してくださいhttp://jsfiddle.net/CNj3A/338/
背景画像付きのdivで構成されています。また、パディング属性を設定したので、背景のテレビ画像の境界線は、divtvBorder内の他の要素でも表示されます。
内部に必要な要素を挿入します。<video>、その他<div>、<image>などである可能性があります。
<div id="tvBorder" style="background-image: url('https://mockuphone.com/static/images/devices/samsung-galaxys4-black-portrait.png'); background-repeat:no-repeat; width:625px; height:532px; padding-left:250px; padding-top:150px;">
<video controls autoplay height="450" width="250" style="object-fit: fill">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
</video>
</div>
画像内のブートストラップ埋め込みビデオ：
HTMLコード：
/* Example 1 */
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="laptop-wrapper">
<iframe width="560" height="315" src="//www.youtube.com/embed/f890SC1schE" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
/* Example 2 */
<div class="container">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="desktop-wrapper">
<iframe width="560" height="315" src="//www.youtube.com/embed/f890SC1schE" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
/* Example 3 */
<div class="container">
<div class="container">
<div class="row">
<div class="col-sm-12" style="background-image: url(' http://img01.deviantart.net/05b6/i/2011/030/8/5/apple_led_cinema_screen_by_fisshy94-d38e3o5.png'); background-repeat:no-repeat; width:900px; height:758px; padding:80px;text-align:center;">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="header-unit">
<div id="video-container">
<video autoplay loop class="fillWidth">
<source src="http://yourwebsite.com/your-video-file.mp4" type="video/mp4"/>
<source src="http://yourwebsite.com/your-video-file.ogg" type="video/ogg"/>
<source src="http://yourwebsite.com/your-video-file.webm" type="video/webm"/>
Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
</div>
</div>
</div>
</div>
</div>
CSS：
/* 1st example */
div.laptop-wrapper {
position: relative;
padding-top: 25px;
padding-bottom: 67.5%;
height: 0;
}
div.laptop-wrapper iframe {
box-sizing: border-box;
background: url(https://i.stack.imgur.com/zZNgk.png) center center no-repeat;
background-size: contain;
padding: 11.9% 15.5% 14.8%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* 2nd example : BACKGROUND IMAGE */
div.desktop-wrapper {
position: relative;
padding-top: 25px;
padding-bottom: 67.5%;
height: 0;
}
div.desktop-wrapper iframe {
box-sizing: border-box;
background: url(http://img01.deviantart.net/05b6/i/2011/030/8/5/apple_led_cinema_screen_by_fisshy94-d38e3o5.png) center center no-repeat;
background-size: contain;
padding: 3.4% 10.8% 18.6%;/* 11.9% 15.5% 14.8% */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* 3rd example : BACKGROUND IMAGE */
.header-unit {
height: 150px;
border: 2px solid #000;
border-right:none;
border-left: none;
position: relative;
padding: 20px;
}
#video-container {
position: absolute;
}
#video-container {
top:0%;
left:0%;
height:100%;
width:100%;
overflow: hidden;
}
video {
position:absolute;
z-index:0;
}
video.fillWidth {
width: 100%;
}