【发布时间】：2016-10-14 21:13:26
【问题描述】：
我想在我的着陆页上使用 youtube 视频序列作为背景。 我希望视频静音并只使用一分钟。这是一个现有的 youtube 视频（来自朋友）。
我怎样才能让它响应？ （当我调整大小时使用 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 !
有点粗鲁
.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
【问题讨论】：
-
您的网站上没有视频，也没有 iframe。在您的 application.js 清单中，它具有 jQuery 和 Bootstrap 插件。然而，您添加了另一个要加载的 jQuery 和 Bootstrap 副本。您在样式表之前加载了脚本。您在正文中有
<link>s，在正文的顶部区域有一个<script>。在这个<script>块中，它试图为一个不存在的元素启动一个轮播插件。顺便说一句，您有一个<script>标签拼写错误为<scrip>。 -
目前还没有视频我知道。我放了我当前网站的例子来显示我想在哪里添加视频（而不是面包车图像）......我会检查脚本谢谢
-
在这里查看我的 iFrameless/JS/CSS 唯一解决方案stackoverflow.com/questions/41616179/…
标签： javascript html css ruby-on-rails-4 youtube