Youtube視頻標題背景

我正在嘗試創建一些網站模板來幫助我提高前端開發技能，因爲我目前在後端工作方面的表現要好得多。Youtube視頻標題背景

我試圖有點複製我自己的網站（https://thomas-smyth.co.uk/），這是一個簡單的Bootstrap模板的風格。但是，我不想在標題中使用靜態照片，而是使用Youtube視頻替換它。我開始削減在我的網站中使用的模板，並將其精簡到儘可能小，我認爲我可以在不破壞標題的情況下得到它。

我發現了幾處地方的代碼，展示瞭如何設置Youtube視頻作爲整個頁面的背景，但不是頁面特定部分的背景。我怎樣才能做到這一點？注 - 它必須從YouTube流式傳輸，因爲我的主機不允許我在他們的服務器上託管視頻。

我當前的代碼：

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <!-- Tell the browser to be responsive to screen width --> 
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> 

    <title>Group Name | Home</title> 

    <!-- Bootstrap 3.3.6 --> 
    <link rel="stylesheet" href="dist/bootstrap/css/bootstrap.min.css"> 
    <!-- Font Awesome --> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css"> 
    <!-- Ionicons --> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css"> 

    <!-- Custom --> 
    <link rel="stylesheet" href="dist/css/mainstyle.css"> 

</head> 

<body> 

    <header> 
     <div class="header-content"> 
      <div class="header-content-inner"> 
       <h1>This is going once vid is done.</h1> 
      </div> 
     </div> 
    </header> 

    <section class="bg-primary"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-lg-8 col-lg-offset-2 text-center"> 
        <h2 class="section-heading">Placeholder!</h2> 
        <p>I should have found a witty comment to put here, but I'm just gonna put "Placeholder" instead.</p> 
       </div> 
      </div> 
     </div> 
    </section> 



    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="dist/bootstrap/js/bootstrap.min.js"></script> 
    <script src="dist/js/mainscript.js"></script> 

</body> 

</html>

CSS

html, 
body { 
    height: 100%; 
    width: 100%; 
} 
body { 
    font-family: 'Merriweather', 'Helvetica Neue', Arial, sans-serif; 
} 
h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; 
} 
p { 
    font-size: 16px; 
    line-height: 1.5; 
    margin-bottom: 20px; 
} 
.bg-primary { 
    background-color: #F05F40; 
} 
section { 
    padding: 100px 0; 
} 
.no-padding { 
    padding: 0; 
} 

header { 
    position: relative; 
    width: 100%; 
    min-height: auto; 
    background-image: url('../img/header.jpg'); 
    background-position: 0% 80%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 
    text-align: center; 
    color: white; 
} 
header .header-content { 
    position: relative; 
    text-align: center; 
    padding: 100px 15px 100px; 
    width: 100%; 
} 
header .header-content .header-content-inner h1 { 
    font-weight: 700; 
    text-transform: uppercase; 
    margin-top: 0; 
    margin-bottom: 0; 
    font-size: 30px; 
} 
@media (min-width: 768px) { 
    header { 
    min-height: 100%; 
    } 
    header .header-content { 
    position: absolute; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
    padding: 0 50px; 
    } 
    header .header-content .header-content-inner { 
    max-width: 1000px; 
    margin-left: auto; 
    margin-right: auto; 
    } 
    header .header-content .header-content-inner h1 { 
    font-size: 50px; 
    } 
} 
.section-heading { 
    margin-top: 0; 
} 

::-moz-selection { 
    color: white; 
    text-shadow: none; 
    background: #222222; 
} 
::selection { 
    color: white; 
    text-shadow: none; 
    background: #222222; 
} 
img::selection { 
    color: white; 
    background: transparent; 
} 
img::-moz-selection { 
    color: white; 
    background: transparent; 
} 
body { 
    webkit-tap-highlight-color: #222222; 
}

最好我到目前爲止（做整個頁面的背景）

<div class="video-background"> 
    <div class="video-foreground"> 
     <iframe src="https://www.youtube.com/embed/W0LHTWG-UmQ?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=W0LHTWG-UmQ" frameborder="0" allowfullscreen></iframe> 
    </div> 
    </div>

CSS

* { box-sizing: border-box; } 
.video-background { 
    background: #000; 
    position: fixed; 
    top: 0; right: 0; bottom: 0; left: 0; 
    z-index: -99; 
} 
.video-foreground, 
.video-background iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    pointer-events: none; 
} 
@media (min-aspect-ratio: 16/9) { 
    .video-foreground { height: 300%; top: -100%; } 
} 
@media (max-aspect-ratio: 16/9) { 
    .video-foreground { width: 300%; left: -100%; } 
}

來源

2017-01-12 Thomas Smyth

我發現這裏tutorial，介紹如何設置視頻爲您的頁面的背景。本教程演示如何將視頻製作爲全屏幕背景以及僅用於特定頁面的背景，就像您想要的那樣。

您需要設置您的Html和CSS部分來實現這種背景。教程頁面包含一些您可以複製的示例代碼。

希望它可以幫助你。

來源

2017-01-13 13:28:42 KENdi

當前的代碼正是這麼做的，或者至少我調整稍微做。我不認爲它實際上可能是將視頻作爲頁面的div /部分的背景進行流式傳輸，除非您使用HTML視頻播放器，而Youtube視頻無法做到這一點，所以我通過頁面在背景上放置了空白框在同一頁面的其他地方有不同的背景。 –

你已經解決了這個問題嗎？ – KENdi

我還沒有解決它，但找到了一個暫時的方法，這有點粗糙。如果沒有人能夠很快回答我的問題，我認爲這是不可能的，因爲這是我讀過的各種文章和問題的印象。 –

我創建了一個簡單的Youtube視頻背景示例，使用直接鏈接到視頻流（YQL/JS/CSS唯一解決方案）。有時，YQL請求在SO上不起作用，因此，請隨時在YQL console和JSfiddle中檢查它。

var vid = "9PDcJeymhWM", 
 
    streams, 
 
    video_focused = true, 
 
    video_tag = $("#video"), 
 
    video_obj = video_tag.get(0); 
 
$.getJSON("https://query.yahooapis.com/v1/public/yql", { 
 
    q: "select * from csv where url='https://www.youtube.com/get_video_info?video_id=" + vid + "'", 
 
    format: "json" 
 
}, function(data) { 
 
    if (data.query.results) { 
 
     streams = parse_youtube_meta(data.query.results.row.col0); 
 
     video_tag.attr({ 
 
      src: streams['1440p'] || streams['1080p'] || streams['720p'] 
 
     }); 
 

 
     document.addEventListener("visibilitychange", function() { 
 
      video_focused = !video_focused ? video_obj.play() : video_obj.pause(); 
 
     }); 
 
    } 
 
}); 
 

 
function parse_youtube_meta(rawdata) { 
 
    var data = parse_str(rawdata), 
 
     streams = (data.url_encoded_fmt_stream_map + ',' + data.adaptive_fmts).split(','), 
 
     result = {}; 
 
$.each(streams, function(n, s) { 
 
    var stream = parse_str(s), 
 
     itag = stream.itag * 1, 
 
     quality = false, 
 
     itag_map = {18: '360p', 22: '720p', 37: '1080p', 38: '3072p', 82: '360p3d', 83: '480p3d', 84: '720p3d', 85: '1080p3d', 133: '240pna', 134: '360pna', 135: '480pna', 136: '720pna', 137: '1080pna', 160: '144pna', 264: '1440pna', 139: "48kbps", 140: "128kbps", 141: "256kbps"}; 
 
    if (itag_map[itag]) result[itag_map[itag]] = stream.url; 
 
}); 
 
    return result; 
 
}; 
 

 
function parse_str(str) { 
 
    return str.split('&').reduce(function(params, param) { 
 
     var paramSplit = param.split('=').map(function(value) { 
 
      return decodeURIComponent(value.replace('+', ' ')); 
 
     }); 
 
     params[paramSplit[0]] = paramSplit[1]; 
 
     return params; 
 
    }, {}); 
 
}

html, body { 
 
\t height: 100%; 
 
\t min-height: 100%; 
 
\t background: #444; 
 
\t overflow: hidden; 
 
} 
 
video { 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t object-fit: cover; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<video loop muted autoplay playsinline id="video"></video>

來源

2017-07-28 16:07:55 350D

我現在很害怕你。花費DAYS試圖解決這個問題。所有的例子都是整頁！只需包裝div元素和所有設置。 –

和@ShawnRebelo一樣的故事，你真棒！我唯一注意到的是，看起來視頻質量不如在Youtube上直接觀看視頻質量那麼好（不那麼流暢/清晰）。有什麼可以提高質量嗎？我的youtube vid有1080p50。也許對於50 fps不同的標籤是必需的？ – Nicholas

@尼古拉斯嗨。您可以擴展流格式並添加更多： '... 298：'720p60na'，299：'1080p60na'，264：'1440pna'...'但所有這些額外的流都沒有聲音，需要更長的時間才能啓動播放。 – 350D

Youtube視頻標題背景

回答

相關問題