Drupal 把文字欄位變成 YouTube 播放器模組
主要的功能是要把文字欄位 ( youtube_id ) 轉換成播放器
/web/modules/contrib/ 底下建立目錄 youtube_embed
接著在目錄底下建立 youtube_embed.info.yml
name: 'YouTube Embed Formatter'
type: module
description: 'Formats a field containing a YouTube ID as an embedded video.'
core_version_requirement: ^10|^11
package: Custom
dependencies:
- field
mkdir -p src/Plugin/Field/FieldFormatter/
cd src/Plugin/Field/FieldFormatter/
在目錄底下建立 YouTubeEmbedFormatter.php
<?php
namespace Drupal\youtube_embed\Plugin\Field\FieldFormatter;
use Drupal\Core\Field\FormatterBase;
use Drupal\Core\Field\FieldItemListInterface;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Plugin\ContainerFactoryPluginInterface;
/**
* Plugin implementation of the 'youtube_embed' formatter.
*
* @FieldFormatter(
* id = "youtube_embed_formatter",
* label = @Translation("YouTube Embed with RWD and Autoplay"),
* field_types = {
* "string",
* "string_long"
* }
* )
*/
class YouTubeEmbedFormatter extends FormatterBase {
/**
* {@inheritdoc}
*/
public function viewElements(FieldItemListInterface $items, $langcode) {
$elements = [];
foreach ($items as $delta => $item) {
// 取得 YouTube ID
$youtube_id = trim($item->value);
// 建立包含 RWD 功能和靜音自動播放的 iframe 標籤
$elements[$delta] = [
'#type' => 'markup',
'#markup' => '<div class="youtube-video-wrapper"><iframe src="https://www.youtube.com/embed/' . htmlspecialchars($youtube_id, ENT_QUOTES, 'UTF-8') . '?autoplay=1&mute=0" frameborder="0" allowfullscreen></iframe></div>',
'#allowed_tags' => ['iframe', 'div'],
];
}
return $elements;
}
}
然後要搭配CSS達成RWD顯示
<style>
/* 讓 YouTube 影片支援響應式 */
.youtube-video-wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 比例 */
height: 0;
overflow: hidden;
max-width: 100%;
background: #000;
margin-bottom: 20px; /* 可選 */
}
.youtube-video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
留言