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.
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 have an embedded youtube video on my template where the source is being dynamically pulled in, and my client wants the ability to have either an image or the youtube video in that section at their discretion.
What I'm trying to do is have code that will find if the iframes src is empty, and if it is display an image instead. I feel like I'm fairly close but I need help getting it to work.
HTML
<div class="col-sm-8 product-video-section">
<iframe id="ytplayer" width="560" height="315" src="youtubelink" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen wmode="Opaque"></iframe>
<img class="videoImg" style="display: none;" src="imgLink" />
</div>
JS
if ($('.product-video-section iframe').contents().find("body").length == 0) {
//alert("This is the IF");
}
else {
//alert("this is the ELSE");
$('.product-video-section iframe#ytplayer').remove();
$('.product-video-section .videoImg').css('display', 'block');
}
Can someone help point out where I've gone wrong?
You can test the iframe source attribute using attr
if (!$('iframe#empty').attr('src'))
{
alert('empty');
}
if (!$('iframe#notempty').attr('src'))
{
alert('empty too');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<iframe id="empty" src="">
</iframe>
<iframe id="notempty" src="www.stackoverflow.com">
</iframe>
Note if there are more than one element that matches your selection you'll need to iterate each one
I have a page and I wanted more than one slide show on the same page but that proves slightly difficult with JavaScript variables so I decide to make each slide show an iframe. This works rather well however now the responsiveness of the iframe is causing issues. The slides within the Iframe are div elements that will stack based on screen size. The issue is now that the Iframe does not get longer. I have tried:
<iframe src="Web.html" height="100%" frameborder="1" marginheight="0" marginwidth="0" scrolling="no"></iframe>
except that doesn't make the iframe long enough even before resizing. My question is, how do I make the Iframe as tall as the page is, and the page will be resizing?
Try Bootstarp Responsive embed.
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
Here is like: http://getbootstrap.com/components/#responsive-embed
I found a solution using the resizeIframe function
<iframe src="Other.html" frameborder="0" scrolling="no" onload="resizeIframe(this);"></iframe>
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
Im trying to add youtube video in my webpage using below mentioned code, is
there anyone who can help me with that.? have a look on my code below.
<div style="width:400px; height:200px;">
<embed src="https://www.youtube.com/watch?v=Q-AV9KMLTFc" wmode="transparent"
type="application/x-shockwave-flash" width="100%" height="100%"
allowfullscreen="true" title="Adobe Flash Player">
</div>
Use the code that Youtube generates for you after clicking share > embed. It looks like this:
<iframe width="560" height="315" src="https://www.youtube.com/embed/Q-AV9KMLTFc" frameborder="0" allowfullscreen></iframe>
Set width and height to whatever values you like.
You could do it with <iframe> like this:
<iframe width="500" height="500"
src="https://www.youtube.com/embed/vEROU2XtPR8">
</iframe>
With Autoplay:
<iframe width="500" height="500"
src="https://www.youtube.com/embed/vEROU2XtPR8?autoplay=1">
</iframe>
Note: After "embed/" in src, be sure to write the correct youtube video id which can be found in the URL link after "=" symbol.
Ex: In this link, https://www.youtube.com/watch?v=vEROU2XtPR8
Youtube video id="vEROU2XtPR8".
Be sure to give the width and height properties of the video size that should be displayed on the screen.
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).