0

I am working on the fiddle in which I want to run a youtube video behind a draggable/resizable image in html/js(jquery).

What I want is the draggable/resizable image should remain over the top of youtube video.

The HTML and Javascript codes which I have used in order to make the draggable and resizable image are:

HTML:

<div id="wrapper" style="display:inline-block">
    <img id="image" src="http://www.google.com.br/images/srpr/logo3w.png" />
</div>

Javascript/Jquery:

$(function() {
$('#wrapper').draggable();
$('#image').resizable();
});

Problem Statement:

I am wondering what changes I should make in the fiddle above so that I am able to place a youtube video behind it.

This is what I have tried through CSS in fiddle but it doesn't seem to work:

#wrapper
{
background: url('https://www.youtube.com/watch?v=EtEukxu6hu0') center center no-repeat;
}
john
  • 11,311
  • 40
  • 131
  • 251
  • The link you have provided to the url will link to a website, and not an image. Thus it will not work. You might want to try to place a transparent image over a video element. –  Oct 18 '18 at 16:02
  • @Frost Which link are you talking about ? Are you talking about `image url link` or `youtube video link` ? – john Oct 18 '18 at 16:09
  • Video link won't work in the background property –  Oct 18 '18 at 16:24
  • @Frost. Thanks for letting me know. – john Oct 18 '18 at 16:40
  • I don't think it possible since youtube video placed on iframe. See this https://stackoverflow.com/questions/14692448/drag-drop-elements-between-parent-frame-and-child-iframe – A. Meshu Oct 18 '18 at 16:45
  • @A.Meshu I tried in this [way](https://jsfiddle.net/qpeehsxn/32/embedded/result). Please have a look. I used Bootstrap as well. – john Oct 18 '18 at 16:54
  • @john i comment regarding the drag and drop. It seems that you can't do that if the iframe is not controlled by you. – A. Meshu Oct 18 '18 at 16:56
  • @A.Meshu `Drag/Drop/Resizable` for a `Google image` doesn't seems to work properly just because I am using iframe ? Is that what you are trying to say ? Let me know if I am right. – john Oct 18 '18 at 17:38
  • @john if i understood right you want to drag the img to the iframe. On the link i provided it say that you cannot do that. Maybe i misunderstood something (here or there...) – A. Meshu Oct 18 '18 at 17:42
  • @A. Meshu Make sense. Is there any can we can say fix that ? I want to resize `google image` all over the youtube video. I will also read the link which you provided. – john Oct 18 '18 at 17:44
  • @john what is the purpose? You just want to hide the video while it's playing, with element on top of it? I think you can do that with transparent div with the same iframe size, placed on top of the iframe. Then (i think) you can drag \ drop elements to that div. Didn't try that but i think this will be something achievable. If that what you want i'll try to do that as an answer (-: – A. Meshu Oct 18 '18 at 17:51
  • 1
    Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/182107/discussion-between-john-and-a-meshu). – john Oct 18 '18 at 17:52

1 Answers1

0

You can try this for your HTML

<div style="position: fixed; z-index: -99; width: 100%; height: 100%">
    <iframe frameborder="0" height="100%" width="100%" src="https://youtube.com/embed/YOUR_YOUTUBE_VIDEO_ID?autoplay=1&controls=0&showinfo=0&autohide=1">
    </iframe>
</div>
<div id="wrapper" style="display:inline-block">
    <img id="image" src="http://www.google.com.br/images/srpr/logo3w.png" />
</div>

updated fiddle - https://jsfiddle.net/qpeehsxn/24/

Stefan Paunovic
  • 75
  • 8
  • Can you update it in the fiddle? In that way, I will be able to visualize. – john Oct 18 '18 at 16:06
  • Thanks, I will have a look and will let you know if I have any questions. Stay tuned. – john Oct 18 '18 at 16:11
  • **Drag/Drop/Resizable** doesn't seems to work properly now. Can you have a look ? I can't resize it anymore. – john Oct 18 '18 at 16:37
  • In this [fiddle](https://jsfiddle.net/qpeehsxn/21/embedded/result) I can resize to any limit. Not sure what happened in your fiddle. – john Oct 18 '18 at 16:40
  • It looks like the problem with the drag and resize is because as soon as the mouse pointer leaves the div that you are dragging it enters the iframe and youtube's mouseover event triggers – Stefan Paunovic Oct 18 '18 at 17:46
  • Is there any can we can say fix that ? I want to resize google image all over the youtube video. Maybe we use something else apart from iframe. Thoughts ? – john Oct 18 '18 at 17:48