I have a Wordpress site and I have a custom field which holds YouTube iframe codes. There is a string holding these iframe codes named $embed. Videos are displayed in the theme with code:
<?php print($embed); ?>
I want to convert my standard YouTube embed codes such that:
Standard Youtube Embed Code:
<iframe width="560" height="315" src="https://www.youtube.com/embed/uxpDa-c-4Mc" frameborder="0" allowfullscreen></iframe>
Converted Format:
<iframe width="560" height="315" src="https://www.youtube.com/embed/uxpDa-c-4Mc?enablejsapi=1&html5=1" frameborder="0" allowfullscreen id="video"></iframe>
Simply, I want to add ?enablejsapi=1&html5=1 to end of URL and add id="video".
How can i obtain this iframe code by manipulating the parameter $embed?
Tnx.
This will add the extra params to the source. (Replace with your current print($embed) code.
// use preg_match to find iframe src
preg_match('/src="(.+?)"/', $embed, $matches);
$src = $matches[1];
// add extra params to iframe src
$params = array(
'enablejsapi'=> 1,
'html5' => 1
);
$new_src = add_query_arg($params, $src);
$embed = str_replace($src, $new_src, $embed);
$embed = str_replace('></iframe>', ' ' . $attributes . '></iframe>', $embed);
print($embed);
Related
I need embed the thumbnail from a Youtube video and when I clic on the thumbnail the video start to play.
I got the following php code (see php code below) where the video is embedded but I need the code where the thumbnail is embedded too and it starts to play when you clic on the thumnail. I think the code for the video to start playing is the below of the following one (see js code below).
PHP Code:
<?php
function mininaturas_youtube_func( $atts ) {
$a = shortcode_atts( array(
'id' => ''
), $atts);
return '<iframe width="560" height="315"
src="https://www.youtube.com/embed/' . $a["id"] . '" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-
picture" allowfullscreen></iframe>';
}
add_shortcode( 'miniatura_youtube', 'mininaturas_youtube_func' );
?>
Js Code (my try):
$(document).ready(function(){
$("#play").click(function(){
$("#remove").hide();
$("#add").show();
});
});
Could you help to include the php code (into the PHP Code section) to embedded the thumbnail of the Youtube video and review the js code?
Thanks
By Using this you can embedded thumbnail to video.
Each YouTube video has 4 generated images. They are predictably formatted as follows:
https://img.youtube.com/vi/<insert-youtube-video-id-here>/0.jpg
https://img.youtube.com/vi/<insert-youtube-video-id-here>/1.jpg
https://img.youtube.com/vi/<insert-youtube-video-id-here>/2.jpg
https://img.youtube.com/vi/<insert-youtube-video-id-here>/3.jpg
The first one in the list is a full size image and others are thumbnail images. The default thumbnail image (ie. one of 1.jpg, 2.jpg, 3.jpg) is:
https://img.youtube.com/vi/<insert-youtube-video-id-here>/default.jpg
For the high quality version of the thumbnail use a url similar to this:
https://img.youtube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg
There is also a medium quality version of the thumbnail, using a url similar to the HQ:
https://img.youtube.com/vi/<insert-youtube-video-id-here>/mqdefault.jpg
For the standard definition version of the thumbnail, use a url similar to this:
https://img.youtube.com/vi/<insert-youtube-video-id-here>/sddefault.jpg
For the maximum resolution version of the thumbnail use a url similar to this:
https://img.youtube.com/vi/<insert-youtube-video-id-here>/maxresdefault.jpg
All of the above urls are available over http too. Additionally, the slightly shorter hostname i3.ytimg.com works in place of img.youtube.com in the example urls above.
Click For More Answer.
I am trying to get just the YouTube embed url from an html embed string.
user puts in an embed-html string to an input. Then i want to strip it down to just the embed link, so i can always have them in my pre-made iframe.
let str = '<iframe width="560" height="315" src="https://www.youtube.com/embed/a24p_KjdpKE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
let indexOfURL = str.indexOf('http');
let embedURL = str.slice(indexOfUrl, str.find(-the-next-double-speech-mark-after-indexOfUrl));
console.log(embedUrl);
Is there a cheeky regex that would do this for me?
Thanks to #VLAZ - i wasn't familiar with HTML parsing before. Not sure why. Anyway, a quick 5-min read on it got me to a point I'd written this, which solves my needs. I hope it solves yours too, if you're reading this. but if it doesn't, i dont overly care.
Note: it works for Vimeo, Soundcloud and YouTube (pasting in their html embed).
const changeEmbedHTMLIntoEmbeddableURL = html => {
let parser = new DOMParser();
let htmlDoc = parser.parseFromString(html, 'text/html');
let embeddableURL = htmlDoc.getElementsByTagName('iframe')[0].src;
console.log('Embeddable URL: ', embeddableURL);
return embeddableURL;
}
I'm trying to play an embedded Youtube video after a button click (.playbutton).
The video is embedded as an iframe within a div named #youtubecontainer.
The easiest way to achieve this is to append '?autoplay=1' to the iframe's src attribute. (I know there is an API, but for now I need to do it this way.)
My HTML code is this
<div class="playbutton">
<img class="playicon">
</div>
<div id="youtubecontainer">
<iframe width="560" height="315" src="//www.youtube.com/embed/XeoFLxN5520" frameborder="0" allowfullscreen></iframe>
</div>
Javascript code
$(function() {
//This controls YouTube playback via button
$('.playbutton').click(function() {
$("#youtubecontainer iframe").attr('src', ($("#youtubecontainer iframe").attr('src') + '?autoplay=1'));
});
});
However, this appends'?autoplay=1' to the src twice, so it reads as follows and fails:
<iframe width="560" height="315" src="//www.youtube.com/embed/XeoFLxN5520?autoplay=1?autoplay=1" frameborder="0" allowfullscreen=""></iframe>
Any ideas why?
Try to replace that autoplay before you add it. Because when you second click on it, you are adding again the ?autoplay=1 what has still there before.
Working DEMO
$("#youtubecontainer iframe").attr('src', $("#youtubecontainer iframe").attr('src').replace(/\?autoplay=1/, "") + '?autoplay=1');
You could try to save the original src of the iframe before the click event:
var source;
$(function() {
//This controls YouTube playback via button
source = $("#youtubecontainer iframe").attr('src');
$('.playbutton').click(function() {
$("#youtubecontainer iframe").attr('src', source + '?autoplay=1');
});
});
Working fiddle: http://jsfiddle.net/robertrozas/notjtz3d/1/
I have a quite peculiar problem with some jQuery code.
Basically I'm trying to work out a video mirror script where you click on a button and the div should change embed code to another video service. This is my code:
jQuery(function($){
$('#mirror1').click(function(){
$('#player-embed').html($('<div />').append($('#video1').clone()).html());
});
});
This is the code for the button
function mirror1( $atts, $content = null ) {
return '<a class="wpb_button_a" title="Mirror 1" href="#mirror1" id="mirror1">
<spanclass="wpb_button wpb_btn-primary wpb_regularsize">Mirror 1</span></a>
<div id="video1" class="video1">' . $content . '</div>';
My problem is that the output gives excessive " quotations
So all I'm seeing is (on page, not in code)
<iframe frameborder=”0″ width=”480″ height=”270″ src=”videourltest” allowfullscreen> </iframe>
And not the actual video itself.
Thanks in advance.
Your code:
<iframe frameborder=”0″ width=”480″ height=”270″ src=”videourltest” allowfullscreen> </iframe>
Your ” and ″ are typographic quotes and not code quotes, code quotes are straight like "
Try:
<iframe frameborder="0" width="480" height="270" src="videourltest" allowfullscreen> </iframe>
I'm using JS to build some HTML that includes the new iframe syntax from YouTube.
When someone clicks a link on the page to a YouTube video, JS checks the document size and if it's big enough, will open up a lightbox-style box on the page and play the video there.
When I test it out, it opens the HTML but the space is just white and the source code shows an empty <iframe> element.
Is there a problem with trying to dynamically add an iframe to a page?
Here is the relevant part of the JS:
iframe = '<iframe width="'+defaults.width+'" height="'+defaults.height+'" src="'+vidsrc+'" frameborder="0" allowfullscreen></iframe>';
container = '<div class="videopow-overlay"><div class="videopow-container">' + iframe + '</div></div>';
$("body").prepend( container );
Here is what gets output:
<div class="videopow-overlay">
<div class="videopow-container">
<iframe width="800" height="485" src="http://www.youtube.com/watch?v=phzvyIQWCo8?hd=1" frameborder="0" allowfullscreen="">
<html><head></head><body></body></html>
</iframe>
</div>
</div>
Change vidsrc from:
http://www.youtube.com/watch?v=phzvyIQWCo8?hd=1
to
http://www.youtube.com/embed/phzvyIQWCo8?hd=1