问题标签 [fitvids]

我正在将FitVids用于响应式视频。我这样实例化它：

我想fitVids()应用于屏幕尺寸低于 480 像素的特定元素，并且我已经实现了这一点。但是，出于显示目的fitVids()，如果用户调整浏览器的大小以检查小宽度的显示，我还需要应用，并且我已经完成了类似这样的操作

... 工作正常，但是，fitVids()似乎应用于引用的 DOM 元素，而不是像我首先想到的引用类，这意味着删除类（对于更宽的屏幕尺寸）不会删除fitVids()就像我想的那样。

那么有什么方法可以删除fitVids()我在元素上调用的内容吗？

编辑 - 我想知道unbind方法是否可以用于此？

当我使用FitVids.js在Twitter Bootstrap 容器中嵌入100 Riffs（摇滚简史）以进行响应式调整大小时：

它在桌面上运行良好，但在 Android（CM 10.1 Nightly，Android 4.2.2）浏览器上运行异常：

• Google Chrome - 音频播放开始，但视频播放没有
• Mozilla Firefox - 音频和视频播放不启动

然而，该播放器在 Vimeo 自己的移动网站上运行良好。我究竟做错了什么？

我正在尝试让 fitvids 调整我的视频大小以尽可能多地填充父区域。这是我的小提琴：

http://jsfiddle.net/LkqTU/9513/

代码：

html:

知道为什么它不起作用吗？

我正在使用 fitvids ( http://fitvidsjs.com/ ) 使我的视频在 Wordpress 中具有响应性，到目前为止它相当简单。我的主页上有一个视频，视频在那里正确调整大小，但由于某种原因，fitvids 无法在帖子页面上工作！

根据 github 上的文档，这是使 fitvids 工作的基本公式：

这是我所做的：

1. 三重检查以确保 jQuery 在主页和帖子页面上加载。
2. 三重检查以确保在主页和帖子页面上调用了 fitvids.js 和 javascript.js（我的自定义 JS）。
3. 确认视频在主页上是响应式的
4. 这是控制台在正常工作的主页上的样子：

这是我的 javascript.js：

不幸的是，Wordpress 单一帖子上的视频没有响应，我正在摸索着想弄清楚为什么不是这样。我查看了单个帖子的控制台，我没有注意到它与主页之间的区别：

我也尝试只调用 jQuery('body').fiVids(); 而不是使用 .video-container 和 .post-video-container

...奇怪的是，主页上的视频继续响应，而单个帖子上的视频则没有。

最后一件事：我收到不安全的 JavaScript 尝试从带有 URL http://www.youtube.com/embed/ISdUqOW3XGc的框架访问带有 URL [HTTP PATH] 的框架。域、协议和端口必须匹配。作为主页和单个帖子页面上的控制台错误。但由于我在两者上都得到了它，我不确定这是问题所在。

当我将视频放入 bxSlider 上的幻灯片时，它可以在桌面浏览器上正常播放，但在 iOS 设备（iPhone 和 iPad）上测试时，视频将无法播放。

我已经包含了当前的 html 代码。我已经复制了<video>幻灯片下方的元素，它应该在所有设备上播放。

根据关于视频的 bxSlider 指南，我已经包含了jquery.fitvids.js文件。问题可能与该插件有关，因为当我删除它时，幻灯片中的视频会播放，但是，幻灯片无法正常运行（重复的幻灯片可见并且缺少控件）。

另一个需要注意的意想不到的事情是，当初始化 bxSlider 的脚本放在库下方的头部时，bxSlider 根本不会启动。

jsFiddle

加载内容后，我正在尝试在Fancybox模态内容上初始化FitVids插件。如果我在用户调整视口大小时使用回调，它可以完美地工作，但是如果我尝试让它在显示内容后应用它，我什么也得不到。我已经进行了测试，以确保通过投入来确保效果，并且是成功的。onUpdateafterShowafterShowconsole.log('whatever')

这是我正在使用的代码：

我在一个 WordPress 网站上使用它，其中内容被加载到一些砖石瓦片中，当点击并通过 jQueryload函数加载页面的一部分时，这些瓦片会触发一个花式框模式窗口。除了 FitVids 之外，一切都很好用。平铺模态内容通常包含 iframe 视频嵌入，我需要它们在触摸/移动设备上配合。

提前致谢。

我有 fitVids 在我的网站上工作。但是，我想知道是否可以防止 fitVids 将视频放大到超出其定义的高度/宽度。例如，如果一个视频是 600px 宽，但容器是 800px，fitVids 将视频放大到 800px 宽，它是模糊的。当容器为较小的设备缩小时，我只希望 fitVids 缩小视频。那可能吗？

我正在尝试为不同的视频镜像制作标签布局。基本上我正在做的是一个带有主选项卡“Mirror 1”和第二个“Mirror 2”的页面。目的是使用 FitVids 使 Tabs 容器内的视频尽可能大。

第一个标签中的第一个视频（这是一个 Vimeo 视频）工作正常，但第二个标签中的 YouTube 视频甚至不显示。为什么？

奇怪的是，这么有名的插件竟然出现了这个问题。我与它抗争了几个小时，终于赢了。我认为任何遇到相同问题的人都会非常感谢这篇文章。

假设我有Twitter-Bootstrap（或另一个能够折叠/展开 div 的类似框架）。众所周知，iframe 可以通过链接来定位，以在其中显示不同的 URL。在这种情况下，我指的是显示在唯一 iframe 中的不同 youtube 视频。

假设#youtubecontainer，它是 的父级#youtube-frame，被折叠。我单击一个链接目标#youtube-frame（如上面显示的代码），并通过 jQuery.onclick事件#youtubecontainer得到扩展。然后fitVids()被应用到它（除了在代码上的这一点之外无法完成：事实上，在扩展之前，#youtubecontainer js 甚至不存在）。但是……惊喜！

fitVids()已从原始 html中获取'src' 属性并将其应用于 iframe，覆盖我刚刚关注的目标链接！！！似乎 jQueryfitVids()插件主要是指#youtube-frame'src' 属性。我的尝试：

• 如果您将某个视频留在“src”中，则该视频将覆盖您单击的任何其他视频。
• 如果您将 'src' 保留为空，或者您甚至完全删除该属性，您将无法解决问题，而且您只会看到一个黑框，而不是不需要的视频。:D
• 如果您第二次单击链接，您最终会得到它。但这很烦人。
• 如果您编辑 jquery.fitvids.js（var 选择器），删除所有 youtube 'iframe src' 选择器并为“#youtube_frame”添加一个条目，这也不会解决问题。

我累了。我发现只有一个可能的解决方案。我也希望这个脚本的创建者能够增强它......这真的很奇怪，当有人想要保持视频元素的纵横比时，这个脚本不是指向元素的 ID，而是把事情弄乱了 'src'属性......就像一个框架只能处理一个src......呸！

可能的解决方案：

1. 在 jQuery 中使用时间并保持正确的顺序，使用eventhandlersor setTimeout()。为此，您需要更改链接到视频的方式：<a target="#youtube_frame"您需要使用 jquery 处理点击，而不是使用比 fitVids 更早触发的 ，更改 iframe 的 'src' 属性。

正确的顺序是：

• 1) Expand the Video Container;
• 2）fitVids()在它上面；

• 3)$('#youtube_frame').attr('src', $(this).attr('href'))

  （最后一点设置srciframe 的属性，从您刚刚单击的链接中获取视频 url）。当然，这必须放在一个在点击事件上执行的函数中。

如果您有其他解决方案，请发布它们。我希望 fixVids 的创建者能够了解这个问题。我个人不知道如何完全修复插件，因为它只留下'src'属性。

新的单页测试案例 > [ http://pastebin.com/uLjJvhxC ]

I have the below image of a blank Macbook.

The image is 1034 × 543.

I want inset a youtube video inside of the "grey" area of the screen. I want it to appear as if the youtube video is playing on the laptop screen.

I also want the laptop image / youtube video to scale, so that when the web page is in a tablet or mobile view, the image and video shrink to match.

I am trying to use fitvid.js to accomplish this but am not having luck -- I can get the video to fit at one static size but I cannot get it to still fit perfectly on resize, it gets deformed.

Below is my current markup:

html:

SASS: