Oxygen Builder 上的 Javascript答案

【问题标题】：Javascript on Oxygen BuilderOxygen Builder 上的 Javascript
【发布时间】：2022-08-18 00:18:36
【问题描述】：

我对 wordpress 的氧气生成器中的 JS 有疑问。我尝试整合一个视频，我找到了一个 JS 脚本来调整它的大小（使其响应）。

视频来源：.webm

// Find all YouTube videos
// Expand that selector for Vimeo and whatever else
var $allVideos = $(\"video[src^=\'//site-web.fr\']\"),

  // The element that is fluid width
    $fluidEl = $(\"body\");

// Figure out and save aspect ratio for each video
$allVideos.each(function() {

  $(this)
    .data(\'aspectRatio\', this.height / this.width)

    // and remove the hard coded width/height
    .removeAttr(\'height\')
    .removeAttr(\'width\');

});

// When the window is resized
$(window).resize(function() {

  var newWidth = $fluidEl.width();

  // Resize all videos according to their own aspect ratio
  $allVideos.each(function() {

    var $el = $(this);
    $el
      .width(newWidth)
      .height(newWidth * $el.data(\'aspectRatio\'));

  });

// Kick off one resize to fix all videos on page load
}).resize();

我收到此错误消息：类型错误：$ 不是函数。（在第 3 行的 \'$(\"video[src^=\'//site-web.fr\']\"\' 中，\'$\' 未定义）。

为什么要将 ^ 添加到您的 $(\"video[src^=\'//site-web.fr\']\" 中？它实现了什么？
我不知道，我猜它是用于正则表达式或类似的东西。没关系，有或没有\“^\”，我得到相同的结果。

标签： javascript wordpress html5-video

【解决方案1】：

我得到了答案，在 Oxygen builder 中，您必须使用 jQuery 而不是 $ 调用。所以：

// Find all YouTube videos
// Expand that selector for Vimeo and whatever else
var $allVideos = jQuery("video[src^='//clef-energies.fr']"),

  // The element that is fluid width
    $fluidEl = jQuery("body");

// Figure out and save aspect ratio for each video
$allVideos.each(function() {

  jQuery(this)
    .data('aspectRatio', this.height / this.width)

    // and remove the hard coded width/height
    .removeAttr('height')
    .removeAttr('width');

});

// When the window is resized
jQuery(window).resize(function() {

  var newWidth = $fluidEl.width();

  // Resize all videos according to their own aspect ratio
  $allVideos.each(function() {

    var $el = $(this);
    $el
      .width(newWidth)
      .height(newWidth * $el.data('aspectRatio'));

  });

// Kick off one resize to fix all videos on page load
}).resize();

【讨论】：