如何使用JavaScript在iframe周圍包裝兩個單獨的div？-有解無憂

我正在使用一個學習管理系統，用戶可以在其中添加 YouTube 視頻，然后使用 iframe 標簽嵌入這些視頻。它們不會自動回應嵌入。但是，我發現這個 JavaScript 將 YouTube 視頻包裝在一個 div 中，以使它們嵌入回應：

var embedItem = document.querySelectorAll('iframe[src*="youtube"]');
  embedItem.forEach(function(eachEmbed){
    let wrapper = document.createElement('div');
    wrapper.classList.add('embed-responsive');
    wrapper.classList.add('embed-responsive-16by9');
    wrapper.appendChild(eachEmbed.cloneNode(true));
    eachEmbed.replaceWith(wrapper);
});

這導致 YouTube 視頻被包裝成 HTML 如下：

<div class="embed-responsive embed-responsive-16by9">
     <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/jTwdtMzZMds" allowfullscreen="true" title="YouTube video">
     </iframe>
</div>

這很好用，但是現在，我想將此元素包裝在另一個 div 中<div >

基本上我想要的原始 iframe 標簽的輸出是：

<div class="video-wrapper rounded">
      <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/jTwdtMzZMds"
                     allowfullscreen="true" title="YouTube video"></iframe>
      </div>
</div>

但我不知道如何調整我發現的 javascript 以自動執行此功能。任何人都可以調整 javascript 代碼來執行此功能嗎？有誰知道如何做到這一點？

uj5u.com熱心網友回復：

我假設您根據類名在您的網站上使用Bootstrap 4 。

正如您在此處看到的，您實際上并不需要另一個 div。您可以將新類應用于在現有代碼中創建的 div 以實作圓角。

請注意，我已添加overflow-hidden到班級串列中。這是將邊界半徑應用于內部元素所必需的。

body {
  padding: 3rem; /* for demo only */
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI N" crossorigin="anonymous">

<div class="embed-responsive embed-responsive-16by9 video-wrapper rounded overflow-hidden">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/jTwdtMzZMds" allowfullscreen="true" title="YouTube video"></iframe>
</div>

然后，無需classList.add()重復呼叫。只需將所有類放在一個串列中。

我在這里更新了變數名。它們不是特別語意化（單數與復數），并且重復使事情變得有些混亂。

const embedItems = document.querySelectorAll('iframe[src*="youtube"]');

embedItems.forEach(function(item) {
  let wrapper = document.createElement('div');

  wrapper.classList.add(
    'embed-responsive',
    'embed-responsive-16by9',
    'video-wrapper',
    'rounded',
    'overflow-hidden'
  );

  wrapper.appendChild(item.cloneNode(true));
  item.replaceWith(wrapper);
});

body {
  padding: 3rem; /* for demo only */
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI N" crossorigin="anonymous">

<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/jTwdtMzZMds" allowfullscreen="true" title="YouTube video"></iframe>

現在，如果由于我不知道的原因您確實需要另一個元素，您可以在另一個級別的包裝中作業。

const embedItems = document.querySelectorAll('iframe[src*="youtube"]');

embedItems.forEach(function(item) {
  let innerWrapper = document.createElement('div');
  innerWrapper.classList.add(
    'embed-responsive',
    'embed-responsive-16by9'
  );
  innerWrapper.appendChild(item.cloneNode(true));

  let outerWrapper = document.createElement('div');
  outerWrapper.classList.add(
    'video-wrapper',
    'rounded',
    'overflow-hidden'
  );

  outerWrapper.appendChild(innerWrapper);
  item.replaceWith(outerWrapper);
});

body {
  padding: 3rem;
  /* for demo only */
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI N" crossorigin="anonymous">

<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/jTwdtMzZMds" allowfullscreen="true" title="YouTube video"></iframe>

由于您使用的是Bootstrap，因此可以使用 jQuery 庫，因此我將提供一個簡單的替代方法來替代所有這些。

https://api.jquery.com/each
https://api.jquery.com/wrap

顯示代碼片段

$('iframe[src*="youtube"]').each(function() {
  $(this) // <-- refers to the currently looped element
    // note the outside-in order here
    .wrap('<div ></div>')
    .wrap('<div ></div>');
});

body {
  padding: 3rem;
  /* for demo only */
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI N" crossorigin="anonymous">

<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/jTwdtMzZMds" allowfullscreen="true" title="YouTube video"></iframe>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

uj5u.com熱心網友回復：

var embedItem = document.querySelectorAll('iframe[src*="youtube"]');
  embedItem.forEach(function(eachEmbed){
    const container = document.createElement('div');
    container.classList.add('video-wrapper');
    container.classList.add('rounded');
    const wrapper = document.createElement('div');
    wrapper.classList.add('embed-responsive');
    wrapper.classList.add('embed-responsive-16by9');
    wrapper.appendChild(eachEmbed.cloneNode(true));
    container.appendChild(wrapper)
    eachEmbed.replaceWith(container);
});

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/508667.html

標籤：javascripthtml

上一篇：如何使用純JavaScript使用物件陣列的選定元素填充Bootstrap表？

下一篇：Linux基礎和命令