I&#39;m trying to start playing an embedded youtube video by clicking an image. The idea is to have an image on top of a video, and when the image is clicked it fades out and starts playing the video.

I&#39;m using jquery to fade the image, and was hoping to find a way to play or click the video using jquery as well. 

The fading is working fine, but I can&#39;t figure out how to trigger the video to play. 
I got it to work on a couple of browsers by setting the video to autoplay and hide it, and then fade in the video when the image was clicked. On most browsers the video would autoplay when faded in, but in chrome it started to autoplay even when it was hidden. It didn&#39;t work well in iOS either.

Since I&#39;m pretty new at this, I&#39;m not even sure if I&#39;m writing it 100% correct, but I&#39;ve tried something like this without success:

         $(&#39;#IMAGE&#39;).click(function() { $(&#39;#VIDEO&#39;).play(); });

So, how would I go about to make the video play on an image click? 
Is there a way to play the video when the image is clicked, just using jquery?

Thank you in advance.


start/play embedded (iframe) youtube-video on click of an image

Is there any way to embed an external web page without using an iframe? I have access to both sites, I just want the page that the content is embedded on to resize based on the content that is embedded (it will change over time, and be on multiple sites). 

Thanks!

EDIT: I don&#39;t think any kind of AJAX would work because it&#39;s cross-site, and JavaScript doesn&#39;t let you load off-site content (as far as I&#39;m aware). 

Embed an External Page Without an Iframe?

I have a folder in Google Drive that I&#39;d like to embed in my website. I can&#39;t find an embed code or anything documented in Google Drive Help articles.

How to embed a Google Drive folder in a website

I am using this code to embed a playlist:

    &lt;iframe width=&quot;816&quot; height=&quot;459&quot;     
      src=&quot;https://www.youtube.com/embed/videoseries?list=xxx&quot; 
      frameborder=&quot;0&quot; allowfullscreen=&quot;&quot;&gt;

To hide the related videos, normally I add `?rel=0` (that&#39;s in the case of a single video embed), but if I try it here:

    &lt;iframe width=&quot;816&quot; height=&quot;459&quot; src=&quot;https://www.youtube.com/embed/videoseries?list=PL4Zkb_7gMrOzZlVy7jIeCjwScavYp6ssm?rel=0&quot; 
     frameborder=&quot;0&quot; allowfullscreen=&quot;&quot;&gt;
     &lt;/iframe&gt;

I get the &quot;bad video&quot; fuzzy YouTube screen (sorry, I don&#39;t know the technical term for this)!

There is no &quot;hide related&quot; option in the YouTube &quot;SHOW MORE&quot; settings for the playlist.

How do I hide related videos at the end of a YouTube playlist embed code?

Though I think the answer maybe in [this other question][1]&#39;s answer concerning the pdf specification, is it possible to **not display** the adobe acrobat toolbars in an embedded pdf document?


  [1]: https://stackoverflow.com/questions/770949/how-to-disable-the-default-toolbar-of-pdf-page

Hiding the toolbars surrounding an embedded pdf?

Is there a way to force PDF files to open in the browser when the option &quot;Display PDF in browser&quot; is unchecked?

I tried using the embed tag and an iframe, but it only works when that option is checked.

What can I do?


How do I force files to open in the browser instead of downloading (PDF)?

How do you embed a SWF file in an HTML page?


How to embed a SWF file in an HTML page?

I have a YouTube video embedded on our website and when I shrink the screen to tablet or phone sizes it stops shrinking at around 560px in width. Is this standard for YouTube videos or is there something that I can add to the code to make it go smaller?

Shrink a YouTube video to responsive width

I&#39;m new to MongoDB--coming from a relational database background. I want to design a question structure with some comments, but I don&#39;t know which relationship to use for comments: `embed` or `reference`?

A question with some comments, like [stackoverflow](https://stackoverflow.com/), would have a structure like this:

    Question
        title = &#39;aaa&#39;
        content = bbb&#39;
        comments = ???

At first, I want to use embeded comments (I think `embed` is recommended in MongoDB), like this:

    Question
        title = &#39;aaa&#39;
        content = &#39;bbb&#39;
        comments = [ { content = &#39;xxx&#39;, createdAt = &#39;yyy&#39;}, 
                     { content = &#39;xxx&#39;, createdAt = &#39;yyy&#39;}, 
                     { content = &#39;xxx&#39;, createdAt = &#39;yyy&#39;} ]

It clear, but I&#39;m worried about this case: **If I want to edit a specified comment, how do I get its content and its question?** There is no `_id` to let me find one, nor `question_ref` to let me find its question. (I&#39;m so newbie, that I don&#39;t know if there&#39;s any way to do this without `_id` and `question_ref`.)

Do I have to use `ref` not `embed`? Then I have to create a new collection for comments?

MongoDB relationships: embed or reference?

I&#39;m trying to figure out a decent solution (especially from the SEO side) for embedding fonts in web pages. So far I have seen [the W3C solution][1], which doesn&#39;t even work on Firefox, and [this pretty cool solution][2]. The second solution is for titles only. Is there a solution available for full text? I&#39;m tired of the standard fonts for web pages.

Thanks!


  [1]: http://web.archive.org/web/20100208164146/http://www.spoono.com/html/tutorials/tutorial.php?id=19
  [2]: http://web.archive.org/web/20130127125919/http://wiki.novemberborn.net/sifr/How+to+use

How to embed fonts in HTML?

I need to embed an image in e-mail. How do I do it?

I do not want to use third party tool, nor am I interested in language specific answer (but it is PHP, in case you are wondering).

I am merely interested in format of resulting e-mail body.

How to embed images in email

I am fairly new to markup (though it&#39;s extremely easy to pickup). I am working on a package and am trying to get the wiki pages looking nice as a help manual. I can insert a YouTube video link into the wiki page pretty easily but how do I embed a YouTube video. I know this may not be possible.

I have read you can use HTML tags so I tried embedding with HTML per this [link][1] as follows:

```html
&lt;object width=&quot;425&quot; height=&quot;350&quot;&gt;
  &lt;param name=&quot;movie&quot; value=&quot;http://www.youtube.com/user/wwwLoveWatercom?v=BTRN1YETpyg&quot; /&gt;
  &lt;param name=&quot;wmode&quot; value=&quot;transparent&quot; /&gt;
  &lt;embed src=&quot;http://www.youtube.com/user/wwwLoveWatercom?v=BTRN1YETpyg&quot;
         type=&quot;application/x-shockwave-flash&quot;
         wmode=&quot;transparent&quot; width=&quot;425&quot; height=&quot;350&quot; /&gt;
&lt;/object&gt;
```

And saved the page but nothing happened.

1.  Is it possible to embed a YouTube video on GitHub wiki pages?
2.  If so how?


  [1]: http://htmlpurifier.org/docs/enduser-youtube.html

How can I embed a YouTube video on GitHub wiki pages?

I am attempting to embed a youtube video, however, I have not discovered a way to keep the bar at the top from showing when the mouse hovers over it. For my purposes it is important that users are not able to have a direct link back to the original video where they can re-watch the video. The following link gives commands for embed features within youtube:

https://developers.google.com/youtube/player_parameters#Overview

I have used the controls and disablekb features to limit viewers ability to skip and replay the video, what I need now is to disable the bar which appears at the top of the video. 

(Where I have gotten http://www.youtube.com/embed/bFEoMO0pc7k?controls=0&amp;disablekb=1&amp;egm=1)

How to hide the bar at the top of &quot;youtube&quot; even when mouse hovers over it?

when embedding a Flash object with the `&lt;object&gt;` and `&lt;embed&gt;` tag, there is an attribute called `wmode`. It seems that most of the time, `wmode=&quot;transparent&quot;` is the same as `wmode=&quot;opaque&quot;` as the Flash doesn&#39;t actually have any transparent color so that the bottom HTML element is to be shown.  As a result, `opaque` should be faster than `transparent` since it requires less processing for transparency, yet most of the time i see Flash object embedded with `transparent` instead of `opaque`.

`opaque` is needed so that other HTML element won&#39;t be covered up by the Flash object (such as a menu item that pops up an extra sub-menu won&#39;t be covered up by the Flash object).

By the way, is there formal documentation for `wmode`&#39;s `opaque`, `transparent`, and `window`?  I was only able to find blogs that describe it but not the formal documentation.  thanks.


differences between using wmode=&quot;transparent&quot;, &quot;opaque&quot;, or &quot;window&quot; for an embedded object on a webpage

Can anyone suggest how I embed a youtube channel into a webpage - I am getting conflicting information from various sites, ideally using the custom player if possible? thanks

How to embed a YouTube channel into a webpage

I&#39;ve been working on a shiny app and would like to include a logo in the upper right corner of the app. How can I easily embed an image using shiny and r?

Thanks!
K

Embedding Image in Shiny App

I want to embed Javascript in a hobby game engine of mine. Now that we have the 5th generation of Javascript engines out (all blazing fast) I&#39;m curious what engine would you choose to embed in a C++ framework (that includes actual ease of embeding it)? 

&lt;sup&gt;_Note: Just to make it clear, I&#39;m not interested in DOM scripting or writing Javascript in a browser._&lt;/sup&gt;

Here&#39;s a compilation of links so far and some tips from the thread

* [SpiderMonkey](http://www.mozilla.org/js/spidermonkey/)
* [tracemonkey](http://wiki.mozilla.org/JavaScript:TraceMonkey) (note:backwards compatible with spidermonkey):
* [V8](http://code.google.com/p/v8/)
* [Squirrelfish](http://trac.webkit.org/wiki/SquirrelFish)

Just for the record, I love Lua and have already embedded it in game engines about 5 times at work.

However now this is a hobby project, and I think that Javascript being known by most web developers and because its ECMA, Flash and Flex developers, a game engine that uses Javascript and XML for scripting would be more user-friendly and cater to a larger user base (and one that so far has not had a chance to use their skills for games) than one with Lua (and there are plenty of those around!).

Also for the record I&#39;ll go with V8 on this one, mostly because I like it&#39;s C++ style.

Which Javascript engine would you embed in your application?

I&#39;m trying to embed a youtube video on to my page once the user gives the link to the video.

    &lt;iframe width=\&#39;560\&#39; height=\&#39;315\&#39; src=&#39;http://www.youtube.com/watch?v=&lt;video id&gt;&amp;amp;output=embed&#39; frameborder=\&#39;0\&#39; allowfullscreen&gt;&lt;/iframe&gt;

But when I try to add this I get this error. After inspecting the page in chrome, I see this error in the console tab

&quot;Refused to display document because of the display is forbidden by X-Frame-Options&quot;

I&#39;m not able to see the video even in `IE` and `Firefox` also

I even tried adding the 

     header(&#39;X-Frame-Options:Allow-From http://www.youtube.com&#39;); 
     header(&#39;X-Frame-Options:GOFORIT);
     &amp;amp;output=embed to the url

After reading certain solutions in other posts.

But I still get the same error.

I also see that the youtube has the method of object embedding to show the video, but already youtube has made that as old method of embedding the video. So I want to use the new iframe method of embedding the video on to my page.

**Problem is seen in** 

- Firefox 11
- Chrome 18.0
- IE 8


Anybody faced this problem?


Embedding youtube video &quot;Refused to display document because display forbidden by X-Frame-Options&quot;

**Edit:** This question was written in 2008, which was like 3 internet ages ago. If this question is still relevant to your environment, please accept my condolences. Everyone else should convert into a format [supported by your browsers](https://videojs.com/html5-video-support/) (That would be H.264 if Internet Explorer is needed, and probably AV1, VP8/VP9 if not) and use the [`&lt;video&gt;` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video).

---

We are using [WMV][1] videos on an internal site, and we are embedding them into web sites. This works quite well on Internet Explorer, but not on Firefox. I&#39;ve found ways to make it work in Firefox, but then it stops working in Internet Explorer.

We do not want to use Silverlight just yet, especially since we cannot be sure that all clients will be running Windows XP with Windows Media Player installed. 

Is there some sort of Universal Code that embeds WMP into both Internet Explorer and Firefox, or do we need to implement some user-agent-detection and deliver different HTML for different browsers?


  [1]: http://en.wikipedia.org/wiki/Windows_Media_Video

Embedding Windows Media Player for all browsers

How can I embed a .png file into a blank &quot;file.html&quot; so that when you open that file in any browser you see that image?

In this scenario, the image file is not linked to from the HTML, but rather the image data is embedded in the HTML itself.




Can I embed a .png image into an HTML page?

Is it possible to embed a flash video &lt;object&gt; into README.md on GitHub? It isn&#39;t showing up: &lt;https://github.com/mattdipasquale/PicSciP&gt;

How to embed a video into GitHub README.md?

Is it possible to embed a PowerPoint presentation (.ppt) into a webpage (.xhtml)?

This will be used on a local intranet where there is a mix of Internet&amp;nbsp;Explorer&amp;nbsp;6 and Internet&amp;nbsp;Explorer&amp;nbsp;7 only, so no need to consider other browsers.


---

I&#39;ve given up... I guess Flash is the way forward.

Embed a PowerPoint presentation into HTML

I&#39;m using [Alamofire][1] in a Swift project, and part of their manual installation instructions are to add Alamofire under *Embedded Binaries* in the General tab for my application target.

![enter image description here][2]

What are *Embedded Binaries*?


  [1]: https://github.com/Alamofire/Alamofire
  [2]: http://i.stack.imgur.com/DXf97.png

What are Embedded Binaries in Xcode?

I need to embed a YouTube video into my responsive site but it&#39;s not scaling correctly, especially on mobile. 
It looks fine on desktop and tablets but once you get below a viewport width of 600, the video breaks its container. To view the whole video on mobile you need to pinch out to a point that the rest of the content only fills about 1/2 the screen vertically. Not so good. 

I want the text content to be 1/3 wide and the video to be 2/3 wide on desktop and tablets and stacked on mobile with the video and content both 100% of the viewport width. I&#39;ve tried using width=&quot;100%&quot; on the iframe but then the height doesn&#39;t scale correctly as you resize and the video either gets stretched or squished. 

I also need to do it with CSS only as i&#39;m simply laying my stylesheets over stock bootstrap 3.0.

Here&#39;s my code:

     &lt;div class=&quot;container&quot;&gt;			
                &lt;div class=&quot;row&quot;&gt;
                    &lt;div class=&quot;col-sm-4&quot;&gt;Content. This is content, it is not meant to be read or understood. Something random goes here, it can be whatever you want, it&#39;s just blankish content provided so that it fills up some space, pretty boring huh?&lt;/div&gt;
                    &lt;div class=&quot;col-sm-8&quot;&gt;
                       &lt;iframe width=&quot;600&quot; height=&quot;338&quot; src=&quot;http://www.youtube.com/embed/KgMt0dtr4Vc&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
                    &lt;/div&gt;
     &lt;/div&gt;


All Embed Solutions on Gang of Coders

Total of 24 Embed Solutions