Question

我想在我的目标网页上使用youtube视频序列作为背景。我希望将视频静音并仅使用一分钟。这是一个现有的YouTube视频（来自朋友）。

我怎样才能使其响应？（当我调整大小时，使用youtube我有大的黑色边框）
如何静音，然后循环？

我相信我需要一些JS ......但我对JS一无所知......如果有人可以解释的话。

.video-background
  iframe src="https://www.youtube.com/embed/iUBn-nipNkk?rel=0&amp;controls=0&amp;showinfo=0;start=245&amp;autoplay=1&amp;&loop=1" frameborder="0"

.container.main-title
    .row
      .col-xs-12.col-sm-12.col-md-12.text-center
        h1.text-inverse
          | Mark Knopfler
        p.text-inverse
          | Mark in summer long ago
        br
        br
        =link_to root_path(@root, anchor: "about") do
          i.fa.fa-4x.fa-arrow-down.fa-fw.hub.text-inverse

.section
  .container
    .row
      .col-xs-12.col-sm-6.col-md-5
        =image_tag("mains/band.png", class:'band')
      .col-xs-12.col-sm-6.col-md-7#about
        br
        h2.text-primary  About the website
        p.site-description "Mark In Summer Long AgoVestibulum fringilla pede sit amet augue. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Praesent egestas tristique nibh. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem."

.section
  .container
    .col-xs-12.col-sm-12.col-md-12
      h1.text-center.text-primary MK & me... somehow...
      br
    .row
      .col-xs-12.col-sm-4.col-md-4.under-section
        .make-it-slow
          = link_to page_path('concerts/index') do
            .thumbnail
              = image_tag("mains/concerts.jpg", class:"category")
              h3.section-title Concerts
      .col-xs-12.col-sm-4.col-md-4.under-section
        .make-it-slow
          = link_to page_path('calendars/index') do
            .thumbnail
              = image_tag("mains/calendars.jpg", class:"category")
              h3.section-title Calendars
      .col-xs-12.col-sm-4.col-md-4.under-section
        .make-it-slow
          = link_to page_path("events/index") do
            .thumbnail
              = image_tag("mains/events.jpg", class:"category")
              h3.section-title Other events

.section
  .container
    .col-md-12
      h1.text-center.text-primary Related Mark Knopfler websites
      br
    .row
      .col-xs-12.col-sm-4.col-md-4.under-section
        .make-it-slow
          = link_to "http://www.markknopfler.com/" do
            .thumbnail
              = image_tag("mains/mkcom.jpg", class:"category")
              h3.section-title Official MK Website
              p.section-description MK.com
              p.section-description Visit the very official MK website, tour dates, shop, annoucements...

      .col-xs-12.col-sm-4.col-md-4.under-section
        .make-it-slow
          =link_to  "http://www.guyfletcher.co.uk/"  do
            .thumbnail
              = image_tag("mains/gf.jpg", class:"category")
              h3.section-title Guy Fletcher 
              p.section-description A very intersting Website to keep in your favorites.
              p.section-description Guy Fletcher runs here a forum, studio and tour diaries ! Have a look !

      .col-xs-12.col-sm-4.col-md-4.under-section
        .make-it-slow
          = link_to "http://www.amarkintime.org/forum/" do
            .thumbnail
              = image_tag("mains/forum.jpg", class:"category")
              h3.section-title AMIT forum
              p.section-description A very nice place to exchange with fans from all over the world! This a non official forum. 
              p.section-description Be cool and do not moan !

有一些sass

.video-background iframe
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  pointer-events: none
  filter: grayscale(80%)
  z-index: -99

.main-title
  margin-top: 15%
  height: 80%
  color: #ffffff
  h1
    font-size: 60px
  p
    font-size: 30px

Answer 1

您提供的代码与您想要对YouTube做的事情几乎没有关系（.video-background是例外）。请在包含您视频的网页上测试此代码段，然后不用首先测试所有其他内容。尝试在源代码中找到实际的YT播放器，并注意你剪切的内容和粘贴的位置。

段

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
  <title>YouTube FS/Mute</title>

  <style>
    .frame {
      position: fixed;
      z-index: -1;
      width: 100%;
      height: 100%
    }
  </style>
</head>

<body>
  <header></header>
  <section class="frame">
    <iframe id='player' src="https://www.youtube.com/embed/o0u4M6vppCI?&enablejsapi=1" frameborder="0" allowfullscreen height="100%" width="100%"></iframe>

  </section>
  <footer>&nbsp;</footer>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="http://www.youtube.com/player_api"></script>


  <script>
    var player;

    function onYouTubePlayerAPIReady() {
      player = new YT.Player('player', {
        playerVars: {
          'autoplay': 1,
          'controls': 0,
          'autohide': 1,
          'wmode': 'opaque',
          'showinfo': 0,
          'loop': 1,
          'mute': 1
        },
        videoId: 'o0u4M6vppCI',
        events: {
          'onReady': onPlayerReady
        }
      });

    }

    function onPlayerReady(event) {
      event.target.mute()
    }
  </script>
</body>

</html>

Answer 2

您可以尝试使用完整的背景iframe：

<iframe id="myVideo" src="https://www.youtube.com/embed/myvideo;autoplay=1" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>

100％的背景应该让它具有响应性。
要使声音静音，您需要一些javascript。 'autoplay = 1'将使其自动播放并循环。

创建一个js文件并添加此jQuery位：

var myVideo =  iframe.getElementById('myVideo'); 
myVideo.mute();

使用您在iframe上选择的ID更改“myVideo”。

希望这有帮助。

Answer 3

也许这可能有所帮助，它实际上比尝试youtube更快......

我放弃了youtube视频，因为我无法移除黑色边框，这真的很烦人。所以我下载了视频，剪切了iMovie中所需的序列，将声音静音并在AWS上传视频。

我这样做了：

.cover
  =video_tag(["https://s3-eu-west-1.amazonaws.com/markinsum/MKlanding.mp4"], autoplay:true, loop:true, class:"landing-video")

和我的Sass：

.landing-video
  position: absolute
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)
  filter: grayscale(80%)
  z-index: 1
  min-width: 100%
  min-height: 100%

结果是here，必须改进btw

作为背景的Youtube录影在着陆页

3 个答案:

段