个人中心
gpt4 book ai didi

javascript - Youtube 视频作为着陆页的背景

转载 作者：行者123 更新时间：2023-11-28 05:01:56 25 4
gpt4 key购买 nike

我想在我的着陆页上使用 YouTube 视频序列作为背景。我希望视频静音并只使用一分钟。这是一个现有的 youtube 视频(来自 friend )。

  • 我该怎么做才能让它响应？ (使用 youtube 时，当我调整大小时我有黑色大边框)

  • 如何静音、循环播放？

我相信我需要一些 JS...但我对 JS 什么都不懂...如果有人能解释一下。

.video-background
  iframe src="https://www.youtube.com/embed/iUBn-nipNkk?rel=0&controls=0&showinfo=0;start=245&autoplay=1&&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

enter image description here

最佳答案

您提供的代码与您想对 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>

关于javascript - Youtube 视频作为着陆页的背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40052078/

25 4 0
文章推荐： html - 使用媒体查询在一行/两行中显示图像时遇到问题
文章推荐： javascript - AngularJS - 函数未调用？
文章推荐： html - 父 div 之外的扩展 div 内的内容未在移动设备中显示
文章推荐： 应用了 CSS Float 但文本根本不显示？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com