We Keep Coding

Trying to use a embedded youTube link for auto play in custom HTML

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>

Iframe mobile responsivness

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';
}

Facebook Iframe color theme

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

DIV swap onclick

I'm currently trying to implement a content locking system to my site and as part of it would like to lock out an on-site mp3 player until the user has completed an offer.
So when the page loads it shows the player, but if they try to click on it, it pops up the content locker and once they've completed an offer it swaps the DIV for the fully usable player.
here's the code:
<div id="mobmp3">
<div id="yoursecDiv" style="display:block; z-index: 999;"> <a href="javascript:void(0)" onclick="var fileref=document.createElement('script');fileref.setAttribute('type','text/javascript'); fileref.setAttribute('src', 'http://c.themixtapesite.com/locker.js?guid=0512eafd69b18d22');document.body.appendChild(fileref); setTimeout(yourFunction, 3000);">
<iframe src="http://themixtapesite.com/wp-content/plugins/amazon-s3-cloud-mp3-player/html5/html5mob2.php?bucket=mixtape2" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" width="97.4%" height="280" max-width="97.4%">
</iframe>
</a>
</div>
</div>
<!-- Place the Real Link within yourfirDiv which is set to not display
until yourFunction has been executed. -->
<div id="yourfirDiv" style="display:none;">
<iframe src="http://themixtapesite.com/wp-content/plugins/amazon-s3-cloud-mp3-player/html5/html5mob2.php?bucket=mixtape2"
frameborder="0" marginheight="0" marginwidth="0" scrolling="no" width="97.4%"
height="280" max-width="97.4%"></iframe>
</div>
So, as you can see, i'm trying to load up an iframe (the player) within yoursecDiv. then once they've completed the offer it reloads yourfirDiv which is the same player but without the content locker.
I was hoping by wrapping the <iframe> in the <a> tag i would achieve this, but alas, it doesn't work.
So i guess my question is:
Is there a way i can overlay a div (or something) over the iframe to act as the link to open the content locker?

this is now solved... after a bit of fresh air my brain started working and i simply used a transparent gif that i overlayed over the div. then set that gif as the trigger link.

JQUERY gotcha, Why can't I change inside an iframe that is hosted locally?

Give the following on a page:
<iframe frameborder="0" allowtransparency="true" tabindex="0" src="" title="Rich text editor" style="width: 100%; height: 100%;" id="hi-world">
<p><span class="tipoff" title="System tooltip for search engines">Download now</span></p><p>adasdads</p><p>a</p><p><span class="tipoff" title="System tooltip for search engines">Download n1111ow</span></p>
</iframe>
The following works:
$('#hi-world').css("width","10px");
But what I want to do is change the paragraphs in the iFrame, and this does not work:
$('#hi-world').find('p').css("background","red");

ok just figured it out:
$('#hi-world').contents().find('p').css("background","red");

The first is changing the css of the iframe element. To do the second, you have to access the contentDocument. As noted, in jQuery you can use contents for this.