對齊視頻背後的視頻

我試圖將視頻背後的圖像對齊，以便它看起來像你正在改變電視機上的頻道。現在視頻很小，我無法調整視頻的大小。任何想法或更好的方法來解決這個問題？對齊視頻背後的視頻

<div class="col-md-offset-1 col-md-5" style="position:relative;"> 
    <div style="position:absolute;"> 
     <iframe allowfullscreen="" src="https://www.youtube.com/embed/oNBBijn4JuY?showinfo=0&amp;wmode=opaque" frameborder="0"></iframe> 
    </div> 
    <div style="max-width:100%;max-height:100%;margin:auto;position:relative;"> 
     <img src="https://dl.dropboxusercontent.com/s/cqyrqtx4i7zwt0w/tvset_small_cropped.png" /> 
    </div> 
</div>

https://jsfiddle.net/e2syv64u/

來源

2015-10-04 Erik Rodriguez

我決定玩這個，並把視頻放在圖片後面。我不確定這會有多快，但它看起來會起作用。

<div class="col-md-offset-1 col-md-5" style="position:relative;" id="tv"> 
    <div style="top:95px;left:37px;position:absolute;" id="player"> 
     <iframe width="415" height="333" allowfullscreen="" src="https://www.youtube.com/embed/oNBBijn4JuY?showinfo=0&controls=0&wmode=opaque&origin=https://jsfiddle.net" frameborder="0"></iframe> 
    </div> 

    <div style="max-width:100%;max-height:100%;margin:auto;position:relative;pointer-events: none;"> 
     <svg width="592" height="522" pointer-events="none" ="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
      <image x="0" y="0" width="592" height="522" xlink:href="https://dl.dropboxusercontent.com/s/cqyrqtx4i7zwt0w/tvset_small_cropped.png" /> 
     </svg> 
    </div> 
</div>

https://jsfiddle.net/e2syv64u/12/

來源

2015-10-05 15:05:18

您可以通過left和top性能做它，就像你在你的提琴做，但你必須在像素數後添加px，如：

<div style="position:absolute;top:10px;left:100px;">

希望這有助於。

來源

2015-10-04 19:20:52

是啊，我發現我並沒有這樣做，在小提琴，但我沒有在這個問題對其進行更新。我更新了小提琴以刪除左上角的樣式。由於視頻顯示較小，所以仍然沒有什麼幫助。 –

您的div呈現正確，但我看不到視頻，因爲存在交叉來源問題（混合內容：頁面通過HTTPS加載，但請求不安全的資源'http://www.youtube.com/embed/oNBBijn4JuY?showinfo=0&wmode=opaque'。此請求已被阻止;內容必須通過HTTPS送達）：

DEMO：https://jsfiddle.net/e2syv64u/2/

<body> 
    <div class="body"> 
     <header id="header"></header> 
    </div> 
    <div role="main" class="main"> 
     <div class="slider-container"> 
      <div class="col-md-offset-1 col-md-5" style="position:relative;"> 
       <div style="position:absolute;top:200px;left:100px; background: #CCC;"> 
        <iframe allowfullscreen="" src="http://www.youtube.com/embed/oNBBijn4JuY?showinfo=0&amp;wmode=opaque" frameborder="0"></iframe> 
       </div> 
       <div style="max-width:100%;max-height:100%;margin:auto;position:relative;"> 
        <img src="https://dl.dropboxusercontent.com/s/cqyrqtx4i7zwt0w/tvset_small_cropped.png" /> 
       </div> 
      </div> 
     </div> 
    </div> 
</body>

來源

2015-10-04 19:25:36

我更新了提琴在YouTube視頻上的https，我只是在發佈問題之前忘了點擊更新按鈕。雖然這個問題有正確的https。 –

如果你想使你的網頁看起來像電視，然後創建一個3x3的表格，打破你的電視盒圖像切成8塊。將這些部分對齊在一起以重新創建電視並用視頻填充中心列。訪問以下鏈接的例子：

http://www.webdevelopersnotes.com/tips/html/html_table_tutorial_rounded_corners.php3

隨着GrafiCode Studio的反應，你將無法按播放鍵。

來源

2015-10-04 19:34:49

很棒的建議。我會嘗試這個。 –

對齊視頻背後的視頻

回答

相關問題