如何設置嵌入視頻在筆記本電腦中的圖像

-2

http://www.ildottoredellepiante.it/formazione/wp-content/uploads/2017/05/laptop-png-6754.png

而且我想將它添加到我的網站「部分-743」（滑塊之後在頁面的頂部） - >http://www.ildottoredellepiante.it，我很想將視頻嵌入屏幕圖像的黑邊。視頻網址來自YouTube並且是以下內容：www.youtube.com/watch?v=ucXRLnIkTyQ

此外，它是否會作出反應？

我期待着您的回覆天才:)

來源

2017-05-29 Marco Dangelis

你可以分享你的代碼而不是你的網站嗎？ –

嗯，我希望我可以，但是我正在尋找代碼.... –

我試圖做一些非常相似的事情 - > https://stackoverflow.com/questions/25573562/wrapping-a- youtube-video-in-a-static-image-frame-and-maintain-responsive-resiz 然而，我不知道如何調整這個代碼爲我的網站和放在哪裏.....抱歉，一個初學者，並期待學習。任何幫助表示讚賞。我試圖插入此代碼的部分是「section-743」，我很想知道如何在模板的編輯器中添加此代碼。這很複雜，但有一些幫助，我相信我們可以做到這一點:) –

<div> 
     <div> 
      <iframe width="560" height="315" src="//www.youtube.com/embed/f890SC1schE" frameborder="0" allowfullscreen></iframe> 
     </div> 
    </div>

div { 
    width: 100%; 
    height: 100%; 
    max-width: 1034px; 
    max-height: 543px; 
    margin: 0 auto; 
} 
div div { 
    position: relative; 
    padding-top: 25px; 
    padding-bottom: 67.5%; 
    height: 0; 
} 
div iframe { 
    box-sizing: border-box; 
    background: url(http://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%; 
}

這裏的jsfiddle：http://jsfiddle.net/4g9e3ywy/

希望它的幫助。

來源

2017-05-29 14:47:11

嘿，謝謝你的幫助。我看不到代碼中的YouTube的src會....我有點困惑。我可以直接將此代碼添加到部分嗎？ –

我只是編輯我的帖子 –

嘿雷米，謝謝你的迴應。我仍然遇到麻煩。我如何直接在wordpress上添加代碼？通過編輯器或通過文本標籤在頁面上？ –

如何設置嵌入視頻在筆記本電腦中的圖像

回答

相關問題