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>

How to display an image on an iFrame?

I have a div which contains an iFrame:
<div class="embed-responsive embed-responsive-16by9" id="camera_view_div">
<iframe allowfullscreen="true" class="embed-responsive-item container well well-small span6" frameborder="0" id="camera_view" mozallowfullscreen="true" msallowfullscreen="true" oallowfullscreen="true" src="" webkitallowfullscreen="true">
</iframe>
</div>
I have an image url from my server and I am trying to set the iFrame's src to the image url. But it starts a download of the image url on update.
cameraView.src = event.info.data['image_url'];
How to set an image url on an iFrame and display it?

as scrappedcola said, this is an odd usage of iframes, but I'll assume you have a powerful argument for it.
I can think of two possible solutions:
The headers of the image being sent by the server are not adecuate
for it to be displayed in the iframe, the browser might just
interpret it as a binary file to download. Check if you can adjust them.
https://jsfiddle.net/0ftobver/2/ << check the headers of the placeholder image
Use srcdoc or injection of html in the iframe, something like:
cameraView.srcdoc = '<!html doctype><style>*{padding:0;margin:0}</style><img src="https://via.placeholder.com/350x150">'
https://jsfiddle.net/q3rvd418/2/
Injection would be similar but accesing the contentDocument property of the iframe.

How do I make a frame compatible with anchor

I have tried to test other questions using StackOverflow, but I couldn't get it to work.
The frame will not scroll to the anchor.
<iframe src="http://coder0.weebly.com/browsers-images.html#B0" width="95%" height="50" target="_parant" id="comfra" frameborder="0" scrolling="no">
<p>Please click here</p>
</iframe>
The id is B0.

The iframe can't be used like that. Please check: What is iframe used for?
You can't add content to an iframe tag like that.
You can check this javascript solution:
Insert content into iFrame

Add div containing any iframe, wordpress

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).

Control styling of elements within iFrame

im not sure if this is possible or not, but im trying to alter the style of elements contained within an iFrame using javascript.
I have tried the following which I believed in theory should work with no luck...
<script>
function click() {
window.frames[0].document.getElementById('daLink').style.backgroundColor="#000";
}
</script>
<a href="#" onclick="click()" >Test</a>
<iframe src="http://www.google.co.uk" width="600" height="400" id="daLink"></iframe>

That will only work if the iFrame Source is on the same domain.
Your code is not working due to the same-origin-policy!
Read more here: Javascript Security