We Keep Coding

How to add youtube video without embedded

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.

Stopping any vimeo video on the page with jquery

sorry about my inexperience. I was given a certain html code:
<div class="embedded-video" style="display: block;">
<span class="fa fa-times-circle video-closer">Close</span>
<p></p>
<div>
<iframe allowfullscreen class="roots-video" frameborder="0" height="360" src="https://player.vimeo.com/video/155722997?title=0&byline=0&portrait=0" style="display: block;" width="640"></iframe>
</div>
<div>
<iframe allowfullscreen class="roots-video" frameborder="0" height="360" id="spvideo" name="spvideo" src="https://player.vimeo.com/video/155722997?title=0&autopause=1&byline=0&portrait=0" style="display: block;" width="640"></iframe>
</div>
</div>
I need a "close" button that stops the videos, whichever one is playing at the moment, or all that are playing, since you will only be able to play one a time.
I used a solution copied from https://stackoverflow.com/a/12932722/3808307
adding
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
and
var iframe = $('.roots-video')[0];
var player = $f(iframe);
$('.video-closer').click(function() {
alert('stoped');
player.api('pause');
});
But it obviously only works for the first video. How do I get the close to work for all the elements of the array? I don't care about performance here, I just want the close to stop all the videos that are playing if I cannot identify which one is playing

I don't have idea how it works but just a guess according to your exists code
$('.video-closer').click(function() {
$('.roots-video').each(function(){
var ele = $f(this);
ele.api('pause');
});
});

Youtube iframe video not showing in Wordpress

I've created a template for one of the pages on my wordpress site & I've added a couple of youtube videos within an iframe but they're not showing. On a blank index.html file that is hosted on my computer is it shown but not when I upload it to Wordpress. When I inspect the page the iframe is there (shown below)
Does anyone know what I'm doing wrong?
HTML:
<p class="reveal1">
Some more text.
<div class="video-container1" align="center">
<iframe width="560" height="315" src="https://www.youtube.com/embed/JfHXbPv9cUg" frameborder="0" allowfullscreen></iframe>
</div>
</p>
<div id="more1" align="center" title="View More">
<img src="http://www.blackballad.co.uk/wp-content/uploads/2016/10/drop.png" width="20px" height="20px">
</div>
JavaScript:
$(document).ready(function(){
$("#more1").click(function(){
$(".reveal1").slideToggle("slow");
$(".video-container1").slideToggle("slow");
});
});
Console errors:

Don't make the iframes yourself. Instead, use the JavaScript published in the iframe API

How to get an iframe to show when hidden?

I have an image that I want the user to see. When the user clicks on this image I want the image to go away and have the video show in it's place. Can someone show me how to do this?
Here is the code I have so far.
<div id="homeflash" style="height:413px; background-image:url(../../../upload/1/img/homeFlashBG.jpg);">
<a href="#">
<img src="../../../upload/1/img/video.jpg" style="display:none" />
</a>
<div id="video" style="display:inline">
<iframe allowfullscreen="" frameborder="0" height="395" src="//www.youtube.com/embed/X8mLel_werQ?rel=0" width="691"></iframe>
</div>
</div>
If someone could edit my post to clean the code up that would be great. I can't figure it out.
To describe the code a little bit:
This is what the code should look like after I click on the image. When you first see the page, the two display styles will be reversed.
Any help will be awesome.
Thanks

A general Idea can be like this:
$(function() {
$("img").click(function() {
$(this).css("display","none"); // will hide your image
$("body").append("<div id='video'></div>"); // will append div with id video, this div should have video code inside this.
});
});

You want to hide the video initially, so give it the style display:none. You also want to give your thumbnail image an id so you can reference it in jQuery. You can also remove the <a> tag from around the image (its not needed)
HTML
<div id="homeflash" style="height:413px; background-image:url(../../../upload/1/img/homeFlashBG.jpg);">
<img id="thumbnail" src="../../../upload/1/img/video.jpg" />
<div id="video" style="display:none">
<iframe allowfullscreen="" frameborder="0" height="395" src="//www.youtube.com/embed/X8mLel_werQ?rel=0" width="691"></iframe>
</div>
</div>
JavaScript
$(document).ready(function(){
$("#thumbnail").click(function(){
$(this).hide()
$("#video").show()
})
})
I would also try to avoid adding CSS styles inline if you can

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.