yt แนวตั้ง
แก้ 3 ที่
1. subs
---
เพิ่ม array
array(
'tag' => 'youtube',
'type' => 'unparsed_equals_content',
'test' => 'vertical\]',
'content' => '<div class="videocontainer" data-youtube-orientation="vertical"><div><iframe frameborder="0" src="https://www.youtube.com/embed/$1?origin=' . $hosturl . '&wmode=opaque" data-youtube-id="$1" allowfullscreen loading="lazy"></iframe></div></div>',
'disabled_content' => '<a href="https://www.youtube.com/watch?v=$1" target="_blank" rel="noopener">https://www.youtube.com/watch?v=$1</a>',
'block_level' => true,
),
2. index.css
---
เพิ่มตอนท้าย
/* Vertical YouTube 9:16 */
.videocontainer[data-youtube-orientation="vertical"] {
max-width: 360px;
}
.videocontainer[data-youtube-orientation="vertical"] > div {
padding-bottom: 177.7777778%;
}
/* Vertical YouTube: allow side-by-side */
.videocontainer[data-youtube-orientation="vertical"] {
display: inline-block;
vertical-align: top;
width: 360px;
max-width: 100%;
margin: 0 12px 12px 0;
}
3. jquery.sceditor.smf.js แก้ 2 ที่
---
sceditor.command.set(
'youtube', {
_dropDown: function (editor, caller, callback) {
var content = document.createElement('div');
var label = document.createElement('label');
label.textContent = editor._('Video URL:');
label.style.display = 'block';
label.style.marginBottom = '4px';
var input = document.createElement('input');
input.type = 'text';
input.placeholder = 'https://';
input.style.width = '100%';
input.style.boxSizing = 'border-box';
var verticalWrap = document.createElement('label');
verticalWrap.style.display = 'block';
verticalWrap.style.marginTop = '10px';
verticalWrap.style.marginBottom = '10px';
verticalWrap.style.cursor = 'pointer';
var vertical = document.createElement('input');
vertical.type = 'checkbox';
vertical.style.marginRight = '6px';
verticalWrap.appendChild(vertical);
verticalWrap.appendChild(
document.createTextNode('วิดีโอแนวตั้ง 9:16')
);
var button = document.createElement('button');
button.type = 'button';
button.className = 'button';
button.textContent = editor._('Insert');
content.appendChild(label);
content.appendChild(input);
content.appendChild(verticalWrap);
content.appendChild(button);
function insertYoutube(e) {
var val = input.value.trim();
var idMatch = val.match(
/(?:v=|v\/|embed\/|youtu\.be\/|shorts\/)([a-zA-Z0-9_-]{11})/
);
// อนุญาตให้ใส่ Video ID 11 ตัวตรง ๆ ได้ด้วย
if (!idMatch && /^[a-zA-Z0-9_-]{11}$/.test(val))
idMatch = [val, val];
var timeMatch = val.match(
/[&?](?:start|t)=((\d+[hms]?){1,3})/i
);
var time = 0;
if (timeMatch) {
timeMatch[1].split(/[hms]/).forEach(function (part) {
if (part !== '')
time = (time * 60) + Number(part);
});
}
if (idMatch) {
callback(
idMatch[1],
time,
vertical.checked
);
}
editor.closeDropDown(true);
if (e)
e.preventDefault();
}
button.addEventListener('click', insertYoutube);
input.addEventListener('keypress', function (e) {
if (e.key === 'Enter')
insertYoutube(e);
});
editor.createDropDown(caller, 'insertlink', content);
setTimeout(function () {
input.focus();
}, 0);
},
exec: function (caller) {
var editor = this;
editor.commands.youtube._dropDown(
editor,
caller,
function (id, time, isVertical) {
var orientation = isVertical
? ' data-youtube-orientation="vertical"'
: '';
editor.wysiwygEditorInsertHtml(
'<div class="videocontainer"' + orientation + '>' +
'<div>' +
'<iframe frameborder="0" allowfullscreen ' +
'src="https://www.youtube-nocookie.com/embed/' +
id +
'?wmode=opaque&start=' +
time +
'" data-youtube-id="' +
id +
'" loading="lazy"></iframe>' +
'</div>' +
'</div>'
);
}
);
},
txtExec: function (caller) {
var editor = this;
editor.commands.youtube._dropDown(
editor,
caller,
function (id, time, isVertical) {
editor.insertText(
'[youtube' +
(isVertical ? '=vertical' : '') +
']' +
id +
'[/youtube]'
);
}
);
}
}
);
และเพิ่มตอนท้าย
sceditor.formats.bbcode.set(
'youtube', {
allowsEmpty: true,
tags: {
div: {
class: 'videocontainer'
}
},
isInline: false,
skipLastLineBreak: true,
format: function (element, content) {
var $element = $(element);
var youtube_id = $element.find('iframe').data('youtube-id');
var orientation = $element.attr('data-youtube-orientation');
if (typeof youtube_id !== "undefined") {
return '[youtube' +
(orientation === 'vertical' ? '=vertical' : '') +
']' +
youtube_id +
'[/youtube]';
}
return content;
},
html: function (token, attrs, content) {
if (!/^[a-zA-Z0-9_-]{11}$/.test(content))
return content;
var orientation =
typeof attrs.defaultattr !== 'undefined' &&
attrs.defaultattr === 'vertical'
? ' data-youtube-orientation="vertical"'
: '';
return '<div class="videocontainer"' + orientation + '>' +
'<div>' +
'<iframe frameborder="0" ' +
'src="https://www.youtube-nocookie.com/embed/' +
content +
'?wmode=opaque" ' +
'data-youtube-id="' +
content +
'" loading="lazy" allowfullscreen></iframe>' +
'</div>' +
'</div>';
}
}
);