I want to embed the YouTube video on my website. The problem is with timeline and origin link properties. For example, I have some text and 2 bbCode
video tags, one with timeline and 2nd without timeline:
This is just a test example.
[youtube]https://www.youtube.com/watch?v=xHLE2LTAItw&t=53s[/youtube]
[youtube]https://www.youtube.com/watch?v=xHLE2LTAItw[/youtube]
Code:
if (preg_match_all("/\[youtube\]((\s|.)+?)\[\/youtube\]/i", $text, $matches)) {
$allMatches = count($matches[0]);
if (is_array($matches[0]) && $allMatches > 0) {
for ($i = 0; $i < $allMatches; $i++) {
$text = str_replace("watch?v=", "embed/", $text);
if (strpos($matches[0][$i], "&t=") !== false) {
$text = str_replace("&t=", "?start=", $text);
$text = preg_replace("#s\[\/youtube\]#i", "&enablejsapi=1&origin=". HAZELFENCES_WEBSITE ."[/youtube]", $text);
} else {
$text = preg_replace("#\[\/youtube\]#i", "?enablejsapi=1&origin=". HAZELFENCES_WEBSITE ."[/youtube]", $text);
}
}
$text = preg_replace("/\[youtube\]((\s|.)+?)\[\/youtube\]/i", "<iframe width=\"640\" height=\"510\" src=\"\\1\" loading=\"lazy\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>", $text);
}
}
return $text;
The iframe src
from the first video returns as: src="https://www.youtube.com/embed/xHLE2LTAItw?start=53&enablejsapi=1&origin=https://test.com?enablejsapi=1&origin=https://test.com"
which is wrong. It should be:
https://www.youtube.com/embed/xHLE2LTAItw?start=53&enablejsapi=1&origin=https://test.com
The video link without timeline must be:
https://www.youtube.com/embed/xHLE2LTAItw?enablejsapi=1&origin=https://test.com
, which is correct using my code. The only issue is with timeline videos.
Please note, this issue is only occurs when 2 video links are available. One with timeline and the second one without timeline.
For example: https://3v4l.org/JTAUp
Any ideas how to fix it? Thank you.
Ok. It's a bit tricky but I have finally fixed it by using RegExp
and preg_replace
function. First of all, I have checked for the video link with timeline and then preg_replace
the &t=00s[/youtube]
with ?start=\\1&enablejsapi=1&origin=". HAZELFENCES_WEBSITE
.
Secondly, I checked for the video without timeline and preg_replace
the /embed/xHLE2LTAItw[/youtube]
with /\\1\\2?enablejsapi=1&origin=". HAZELFENCES_WEBSITE ."[/youtube]
.
My code:
$text = str_replace("watch?v=", "embed/", $text);
$isVideoWithTimeline = preg_match("#\[youtube\](http|https):\/\/www\.youtube\.com\/([a-z]+\?v=|[a-z]+\/)[a-zA-Z0-9]+(&|&[a-zA-Z]+;)[a-zA-Z]=\d+s\[\/youtube\]#si", $text);
if ($isVideoWithTimeline > 0) {
$text = preg_replace("#&t=([0-9]+)s\[\/youtube\]#si", "?start=\\1&enablejsapi=1&origin=". HAZELFENCES_WEBSITE ."[/youtube]", $text);
}
$isVideoWithoutTimeline = preg_match("#\[youtube\](http|https):\/\/www\.youtube\.com\/([a-z]+\?v=|[a-z]+\/)[a-zA-Z0-9]+\[\/youtube\]#si", $text);
if ($isVideoWithoutTimeline > 0) {
$text = preg_replace("#/([a-z]+\?v=|[a-z]+\/)([a-zA-Z0-9]+)\[\/youtube\]#si", "/\\1\\2?enablejsapi=1&origin=". HAZELFENCES_WEBSITE ."[/youtube]", $text);
}
$text = preg_replace("/\[youtube\]((\s|.)+?)\[\/youtube\]/i", "<iframe width=\"640\" height=\"510\" src=\"\\1\" loading=\"lazy\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>", $text);
return $text;
Now, everything works well. The issue is resolved.