Hi I am trying to display an iframe video from YouTube on a page. I get a 404 error on blank block when I run the page. What could possibly be wrong?
My code is:
<iframe width="854" height="480" src="{{ $vid->videoURL . '&output=embed' }}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Change your url from https://www.youtube.com/watch?v=8nbsSkwSbb0&output=embed to https://www.youtube.com/embed/8nbsSkwSbb0. The /embed endpoint allows outside requests, while the /watch does not. I think, you can create an accessor method in your Video model like this:
public function getSrcAttribute()
{
// $this->videoUrl: https://www.youtube.com/watch?v=8nbsSkwSbb0
parse_str(parse_url($this->videoURL)['query'], $output);
return 'https://www.youtube.com/embed/' . $output['v'];
}
Then use it like:
<iframe
src="{{ $vid->src }}"
width="854"
height="480"
frameborder="0"
allow="autoplay; encrypted-media"
allowfullscreen></iframe>
Related
I am trying to make a website that displays the most recent result for a specific YouTube search. Using PHP I can successfully call the API and grab the video ID I need, but I am having trouble using this to update the user-facing HTML page. I want the PHP script to update the HTML file itself, so the user loads the page with the most recent result already embedded (or the most recent result since the script has last ran, which I intend to schedule every 15 minutes or so).
Here is the HTML (main.html), I am trying to replace src link in the iframe. It should go from this:
<div id="videoembed">
<iframe width="697" height="392" src="https://www.youtube.com/embed/CZIINXhGDcs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
To this:
<div id="videoembed">
<iframe width="697" height="392" src="https://www.youtube.com/embed/ElGoC3qFYRg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
I'm not concerned about the values other than src at this time
Following the answers to this question I have tried replacing the element through its nodeValue, but the result is that I get a test.html file with the same iframe as the original, so a file was created but without the replacement executed. (I am saving to test.html for testing purposes, the final version will simply overwrite the main.html):
///Turn the API response into a usable json
$response = json_encode($service->search->listSearch('snippet', $queryParams));
///get the videoId
preg_match('/(?<=videoId"\:")(.*)(?="})/', $response, $output_array);
///use the videoId to make an iframe called $output_embed
$embed1 = "<iframe width=\"697\" height=\"392\" src=\"https://www.youtube.com/embed/";
$embed2 = "\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>";
$output_embed = $embed1 . $output_array[0] . $embed2;
///create a document
$doc = new DOMDocument();
///load in the main page with the existing embedded video
$html = "main.html";
$doc->loadHTMLFile($html);
///grab the contents of the videoembed div and replace them with the contents of the $output_embed
$belement = $doc->getElementById('videoembed');
$oldString = $belement->nodeValue;
$newHTML = str_replace($oldString,$output_embed,$html);
$doc->saveHTMLFile("test.html");
I tried preg_replacing it too like this answer, but I got the same result of a new test.html file with no changes.
$doc = new DOMDocument();
$html = "main.html";
$doc->loadHTMLFile($html);
$html = preg_replace('/<iframe.*?<\/iframe>/', $output_embed, $html);
$doc->saveHTMLFile("test.html");
I think I am missing something fundamental here. I feel like my code just is not interacting with what I need it to. Whenever I try to print out the nodevalue or any way of grabbing the contents of the I get a blank result. Not very familiar with PHP (no formal coding training in general), I think I may be misunderstanding something with strings or arrays or ways that certain variables are handled.
Here is my current workaround (which is slow because the user has to get current.html):
PHP:
///Turn the API response into a usable json
$response = json_encode($service->search->listSearch('snippet', $queryParams));
///get the videoId
preg_match('/(?<=videoId"\:")(.*)(?="})/', $response, $output_array);
///create a document
$doc = new DOMDocument();
///force a full iframe into it in 3 parts: before the videoId, videoId, and after the videoId
$doc->loadHTML("<iframe width=\"697\" height=\"392\" src=\"https://www.youtube.com/embed/" . $output_array[0] . "\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>");
$doc->saveHTMLfile("current.html");
HTML:
<div id="videoembed">
<?php
include 'current.html';
?>
</div>
It works fine, but it feels a lot slower than it could be.
Just AJAX the url and replace the iframe
Do this at the end of the php
header("content-type: application/json");
echo "{ \"youtubeID\": \"$videoId\" }";
and have
document.getElementById('myForm').addEventListener('submit', function(e) {
e.preventDefault(); // stop submission
fetch(`/search.php?q=${encodeURIComponent(this.queryParams.value)}`)
.then(response => response.json())
.then(data => {
if (data.youtubeID) {
document.getElementById('videoembed').innerHTML = `<iframe width="697" height="392" src="https://www.youtube.com/embed/${data.youtubeID}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`;
}
});
});
<form id="myForm">
<input type="text" name="queryParams" />
</form>
<div id="videoembed">
<iframe width="697" height="392" src="https://www.youtube.com/embed/CZIINXhGDcs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
I want to display the youtube link stored in the database and just call the link but it can't
<div class="divideo">
<iframe width="560" height="315" src="<?php echo $link; ?>" frameborder="0" allowfullscreen></iframe>
</div>
but youtube can't connect
<div class="divideo">
<iframe width="560" height="315" src="<?php echo base_url(); ?>/path/<?php echo $link ?>" frameborder="0" allowfullscreen></iframe>
</div>
You should have to give the proper path of the video link if that link is in your server if you are using an external source then use a proper link in your src tag.
I want to display youtube video on a page, the following is my code in order to fetch youtube video URL from the database stored in mysql and then display it by iterating using while loop. However, the iframe does not display any video inside it.
<?php
if ($get_result != false) {
while ($row = mysqli_fetch_array($get_result, MYSQLI_ASSOC)) {
?>
<iframe width="560" height="315" src="<?php echo $row["url"]; ?>" frameborder="0" allowfullscreen></iframe>
<?php
}
}
?>
I have also tried using video tag inside while loop but it does not display the Youtube video inside the video player.
Please help me to solve this issue.
You can use Youtube with embed, like this:
<iframe width="560" height="315" src="https://www.youtube.com/embed/<?php echo $row["url"]; ?>?autoplay=1&autohide=1&controls=1&showinfo=0&modestbranding=1&rel=0"></iframe>
The problem is with your URL value.Replace "watch?v=" in video url with "v/" and try again.For example I tried with
<iframe width="560" height="315"
src="https://www.youtube.com//v/txSGdNONUJE" frameborder="0" allowfullscreen></iframe>
The above code will work fine.
I have a page called 'mas.php' where i retrieve values from database. An IFrame is present in mas.php page. It is defined as follows:
<iframe width="523" height="234" scrolling="No"
width="500" height="145" src="mail-to.php" frameborder="0"
name="myframe" ></iframe>
Now from mail-to.php page I have to navigate to mail.php for mailing.
The sequence is:
(mas.php-->mail-to.php[iframe]--->mail.php)......
here while using the iframe in 'mas.php' page can i navigate to 'mail-to.php' by defining id in iframe?
<iframe width="523" height="234" scrolling="No"
width="500" height="145" src="mail-to.php?id=<?php echo $row['id'];?>"
frameborder="0" name="myframe" ></iframe>
How can I get the video ID for youtube and vimeo videos embed code? A youtube video embed code looks like this:
<iframe width="560" height="315" src="http://www.youtube.com/embed/dbPmWbqAJPs" frameborder="0" allowfullscreen></iframe>
where the ID in this is dbPmWbqAJPs.
A vimeo embed code looks like this:
<iframe src="http://player.vimeo.com/video/62468031?color=00ff00" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
where the ID in this example is 62468031.
I don't want to replace those exact ids, but rather have a pregmatch/pregreplace that finds the id in any embed of vimeo and of youtube.
try this
vimeo
$string='<iframe src="http://player.vimeo.com/video/62468031?color=00ff00" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>';
preg_match_all( '~http://player.vimeo.com/video/(.*?)\?~si',$string,$M);
echo ($M[1][0]);
youtube :
$string='<iframe width="560" height="315" src="http://www.youtube.com/embed/dbPmWbqAJPs" frameborder="0" allowfullscreen></iframe>';
preg_match_all( '~http://www.youtube.com/embed/(.*?)\"~si',$string,$M);
echo ($M[1][0]);
Try below code for php, it works without pregmatch
i.e. :
http://vimeo.com/22222222
http://player.vimeo.com/video/22222222
http://vimeo.com/channels/staffpicks/22222222
http://vimeo.com/groups/groupsname/22222222
PHP Code :
$vimeoUrl = 'http://vimeo.com/channels/channelsName/22222222';
$fetchVimeoIdArr = explode('/', $vimeoUrl);
$idCounter = count($fetchVimeoIdArr) - 1;
$vimeoId = $fetchVimeoIdArr[$idCounter];