I am using this function to make Youtube videos responsive. This adds a div surrounding Youtube embed codes.
add_filter( 'embed_oembed_html', 'custom_oembed_filter', 10, 4 ) ;
function custom_oembed_filter($html, $url, $attr, $post_ID) {
$return = '<div class="video-container">'.$html.'</div>';
return $return;
}
It works great, but I just copied it from someone's tutorial, so I don't understand exactly what it's doing. I want to modify it so that it also adds the same div surrounding a libsyn iframe.
This is what the Youtube iframe code looks like, and the function above adds an enveloping div as it should.
<iframe src="//www.youtube.com/embed/MKif3vEhgdg" frameborder="0" allowfullscreen="allowfullscreen" style="width: 690px; height: 388.125px;"></iframe>
This is the Libsyn iframe, and the current function does not add a div.
<iframe style="border: none;" src="//html5-player.libsyn.com/embed/episode/id/4016467/height/360/width/640/theme/standard/direction/no/autoplay/no/autonext/no/thumbnail/yes/preload/no/no_addthis/no/" width="640" height="360" scrolling="no" allowfullscreen="allowfullscreen"></iframe>
How can I modify the function to add the same div to both iframes?
Since libsyn is probably not a default oembed provider, you could try to register it using this code in your functions.php file:
function custom_oembed_provider() {
wp_oembed_add_provider( '//html5-player.libsyn.com/*', '', false );
}
add_action( 'init', 'custom_oembed_provider' );
or you could use jQuery:
jQuery(document).ready(function() {
jQuery('iframe[src*="html5-player.libsyn.com"]').wrap('<div class="video-container" />');
});
otherwise, just use plain HTML:
<div class="video-container"><iframe style="border: none;" src="//html5-player.libsyn.com/embed/episode/id/4016467/height/360/width/640/theme/standard/direction/no/autoplay/no/autonext/no/thumbnail/yes/preload/no/no_addthis/no/" width="640" height="360" scrolling="no" allowfullscreen="allowfullscreen"></iframe></div>
The filter tag you are using 'embed_oembed_html' only matches websites from a whitelist as mentioned here http://codex.wordpress.org/Embeds#In_A_Nutshell
This list contains youtube (so it works) but not libsyn.
You need to add support for libsyn by either calling wp_oembed_add_provider() if it has oEmbed enabled (docs), or wp_embed_register_handler() if not (docs).
Related
I am trying to implement a embedded youTube link to a custom Html page and setting it to autoplay but as I open my Homepage video doesn't play and only played when clicked .
<iframe width="1560" height="415" src="https://www.youtube.com/../?autoplay=1"
frameborder="0" allowfullscreen></iframe>
I want to make it responsive.
I'm not sure if this helps or even works but have you tried something like this?
$(document).ready(function() {
$(iframe).click();
});
You said https://www.youtube.com/../?autoplay=1
Get rid of that slash before the question mark
I think it should be https://www.youtube.com/viddata?autoplay=1 instead.
Maybe thats why its not playing
Get rid of the slash in the URL like Coder2195 said (https://www.youtube.com/viddata?autoplay=1). Also try to add this script to the HTML file:
<script>
window.onload = function() {
var videoElement = document.getElementById("videoElement");
videoElement.click()
}
</script>
And make the iframe element have a custom id:
<iframe id="videoElement" width="1560" height="415" src="https://www.youtube.com/../?autoplay=1" frameborder="0" allowfullscreen></iframe>
I'm working on an extension and I need help to remove the video controls and replace it with the native browser controls.
This is what I have
document.getElementById("(*YOUTUBE CONTROLS*)").innerHTML = "<video controls>"
You can hide youtube controls with ?controls=0 after src
ex:
and some more customization.
To reskins the player you can write a custom jquery of js function to edit the content of the frame after it's loaded.
Here's and example
HTML
<iframe width="800" scrolling="no" id="prev" src="">your browser needs to be updated.
</iframe>
jquery
$(document).ready(function() {
$('#prev').contents().find('body').html('<div> blah </div>');
})
Can someone explain why Facebooks iframe colorscheme not working?
In fact, it does work with Javescript SDK.
Why doesn't it work with Iframe? Have tried to add ( data-colorscheme="dark" ) to the iframe with no succes.
https://developers.facebook.com/docs/plugins/like-button
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FAdamskyMotorkylareAb%2F%3Ffref%3Dts&width=240&layout=standard&action=like&size=small&show_faces=true&share=false&height=80&appId" width="240" height="80" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="false" colorscheme="dark"></iframe>
Have tried to add ( data-colorscheme="dark" ) to the iframe with no succes.
Those data attributes are evaluated by the JS only. When you use the iframe version, Facebook has no way to even read that attribute, because it is in a document from a different domain.
For the iframe version, you need to pass it as parameter in the URL:
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.
com%2FAdamskyMotorkylareAb%2F%3Ffref%3Dts&width=240&layout=standard&...&colorscheme=dark" width="240" hei
I am trying to append an embed livestream using jQuery's append method doing the following:
function whatever() {
var $insaneLivestream = $('<iframe class="livestream" src="http://www.twitch.tv/gamesdonequick/embed" frameborder="0" scrolling="no" height="378" width="620"></iframe><iframe class="chat" src="http://www.twitch.tv/gamesdonequick/chat?popout=" frameborder="0" scrolling="no" height="600" width="350"></iframe>');
$(".embedbox").append($insaneLivestream);
}
Althought I thought this was supposed to work, the element seems to be created but not appended to embedbox at all. If I explicitly add the embed's DOM to the document it works like a charm.
Edit: also tried
$(document).ready(funtion() {
$(".embedbox").html('<iframe class="livestream" src="http://www.twitch.tv/gamesdonequick/embed" frameborder="0" scrolling="no" height="378" width="620"></iframe><iframe class="chat" src="http://www.twitch.tv/gamesdonequick/chat?popout=" frameborder="0" scrolling="no" height="600" width="350"></iframe>')
});
and still doesn't work.
The key seems to be not the change to html() instead of append(), but just the ready. whatever() must have been getting called before the DOM was loaded. Also, were you actually calling whatever(), or just defining it?
I would venture that this would also work:
function whatever() {
var $insaneLivestream = $('<iframe class="livestream" src="http://www.twitch.tv/gamesdonequick/embed" frameborder="0" scrolling="no" height="378" width="620"></iframe><iframe class="chat" src="http://www.twitch.tv/gamesdonequick/chat?popout=" frameborder="0" scrolling="no" height="600" width="350"></iframe>');
$(".embedbox").append($insaneLivestream);
}
$(document).ready(function () {
whatever();
});
Additionally, $(document).append(//...) is bad syntax and will error out, see
Why $(document).append() doesn't work in jQuery 1.9.1?
I've never tried to append to document, but I didn't know it didn't work, so that was interesting to learn when researching this question.
I have some links on my page and everyone is linked to a popup which should load an iframe with a dynamic source attribute. The iframe has a div called 'pholder' in which the iframe should be loaded. So on every link should be another iframe. But it isn't. It's always the same. To be exactly, it's always the last link and I don't know why. Here you can see the HTML of the popup:
<div id="toPopup3">
<div id="videoContainer">
<div id="activeVideo">
<div class="pholder"></div>
</div>
</div>
</div> <!--toPopup3 end-->
I have to say that my links all have the class toPopup3 link + e. e is the maximum of Videos (0-23). So I use this code to add the iframe:
var videoLink;
var split;
$('[class^="topopup3 link"]').each(function(){
videoLink = $(this).attr('href');
split = videoLink.split("/");
});
$('.pholder').html('<iframe src="http://player.vimeo.com/video/'+split[3]+'?title=0&byline=0&portrait=0&color=fc6626" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');
So it always shows the last source in the iframe and I don't get rid of it. Can someone help me?
Here is a link to the live version of the page: Live Page. The problem occurs at 'film production'. I also put console.log(split[3]); in the code to see the order of the links.
Edit: given a little more insight into your goal, I think it would be better to accomplish this with a clickhandler:
$('[class^="topopup3 link"]').on('click', function(){
var videoLink = $(this).attr('href');
split = videoLink.split("/");
$('.pholder').html('<iframe src="http://player.vimeo.com/video/'+split[3]+'?title=0&byline=0&portrait=0&color=fc6626" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');
// may need to show the iframe modal or whatever here
});
Your not doing anything with the split variable until you are done looping, therefore the value will be the last one. If you are wanting to use each value, you need to move your subsequent $('.pholder')... code into your each block