How to run a youtube video behind an image in html/js? - javascript

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

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/

Related

Base64 Image Encoding inside Javascript

i'm trying to implement Images inside my javascript-file as Base64 Encoding but the Images will not show up in the HTML5 Animation.
So, my goal is, to only have 1 html canvas and 1 Javascript-Animation file, without further referenced Images. Right now, the Package i have consists of a html-File, a JS-file and a few PNG/JPG.
This is the HTML Code:
<body onload="init();" style="margin:0px;">
<div id="animation_container" style="background-color:transparent; width:820px; height:250px">
<canvas id="canvas" width="820" height="250" style="position: absolute; display: block; background-color:transparent;"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:820px; height:250px; position: absolute; left: 0px; top: 0px; display: block;">
<div class="myClickButton" type="button" id="IAB_clicktag" ><img src="blank.png" width="100%" height="100%" onclick="clickURL();"></div>
</div>
</div>
</body>
And this is the Javascript-Part which hast the Images:
manifest: [
{src:"./background_400x800.jpg", id:"background_400x800"},
{src:"./kandidatenmin.png", id:"kandidatenmin"},
{src:"./jakob_nicolemin.png", id:"jakob_nicolemin"}
I have no Clue how to get the Base64-Code to work in this.
The HTML and JS is generated with Adobe Animate (and is about 1200lines long) to create some Animations but there is no option to automate this step.
Reason to implement those images, is, that its not possible to keep the dynamiclinks as the filepath will be changed throughout the Content Management process.
Thank you, best
M

How to set other site on canvas in html 5?

i want open google.com in my website like browser , i can set website on canvas ?
or have any way to solve ?
<img id="scream" src="https://www.google.com/" alt="The Scream" width="220" height="277">
You can use iframe tag, like this:
<iframe style="width: 100%; height: 300px; overflow: hidden" src="https://www.google.com/webhp?igu=1"></iframe>

Dynamic Logo Re-sizing using HTML or CSS

Hi trying to figure out how to dynamically resize a logo, when i use percentages it uses a percentage of the whole page not the div that contains it.
<img src="Images/logo.png" name="logo" id="logo">
<div id="top_border"></div>
<img id="background" src="Images/BG_1.jpg">
Any help will be greatly appreciated. thank you.
In your CSS File add :
img {
width: 20%;
max-width: 300px;
height: auto;
}
And if you want to enforce a fixed max width of the image, just place it inside a container, for example:
<div style="max-width:300px;">
<img src="image/example.jpg" />
</div>

Youtube video shows on click of image

I've looked at a few implementations of this and so far none have worked so I'm resorting to posting. The concept is: a placeholder image which once clicked changes into the video and autoplays.
Current HTML:
<div id="ytvideo" style="display:none;">
<iframe width="939" height="528" id="ytvideo" frameborder="0" allowfullscreen></iframe>
</div>
<img class="aligncenter size-full" id="homevideo" alt="placeholder" src="/wp-content/uploads/2013/10/placeholder.jpg" width="940" height="548" />
Current JS:
jQuery(document).on('click','#homevideo',function(e){
jQuery('#ytvideo').show();
jQuery('#homevideo').hide();
jQuery('#ytvideo').attr("src","www.youtube.com/embed/[myvidid]?autoplay=1");
jQuery("#ytvideo").attr('src', jQuery("#ytvideo", parent).attr('src') + '?autoplay=1');
});
I've looked at trying to reload the iframe but that doesn't seem to work.
Any ideas?
MARKED: FIXED
You forgot the protocol - www.youtube.com/… would link to folder on the server.
With protocol it works fine – I’d suggest creating the whole iframe dynamically though, because with an empty src attribute at the beginning it would load the same page it is embedded in.
<div id="ytvideo" style="display:none;"></div>
<!-- replaced your image with a span here for fiddle -->
<span id="homevideo" data-vidid="mbOEknbi4gQ">click me</span>
$(document).on('click','#homevideo',function(e){
$('#homevideo').hide();
$('#ytvideo').html('<iframe width="939" height="528" id="ytvideo" frameborder="0" allowfullscreen src="http://www.youtube.com/embed/'+$(this).attr("data-vidid")+'?autoplay=1"></iframe>').show();
});
http://jsfiddle.net/HuVqm/
As discussed in one of the comments, you can get both the img and the video from the api.
This would be good if you didn't want to maintain the image, just wanted it to pull through from YouTube. (However I am not sure that YT provide an image as large as 939 so in your case you might still want to use your own image). I have put in a random channel name 'RIDEChannel' feel free to change that with your channel name.
<div id="vid"></div>
$.getJSON("http://gdata.youtube.com/feeds/api/users/RIDEChannel/uploads?max-results=1&v=2.1&alt=jsonc&callback=?", function (myvid) {
var vid = $("#vid");
$.each(myvid.data.items, function (i, item) {
vid.append("<img width='300' height='250' src='" + item.thumbnail.hqDefault + "'>");
$(document).on("click", "#vid img", function (event) {
vid.append("<iframe width='300' height='250' src='http://www.youtube.com/embed/" + item.id + "?autoplay=1' frameborder='0'></iframe>");
$(this).hide();
});
});
});
So the problem laid with the youtube url missing the http:// prefix and also for the fact that the iframe name was the same as the div it was enclosed in. (How silly of me) Thus it was attaching the SRC to the div, not the iframe.
Working DEMO
Try this,
First you cannot have same id for more than one elements <div id="ytvideo" and <iframe id="ytvideo"
[myvidid] in http://www.youtube.com/embed/[myvidid]?autoplay=1 should be replaced with the id of the video
html
<div id="ytvideo1" style="display:none;">
<iframe width="939" height="528" id="ytvideo" frameborder="0" allowfullscreen></iframe>
</div>
<img class="aligncenter size-full" id="homevideo" alt="placeholder" src="http://thefabweb.com/wp-content/uploads/2012/12/6191814472_fa47c79b67_b-900x600.jpg" width="940" height="548" data-vid='DBNYwxDZ_pA'/>
code
jQuery(document).on('click','#homevideo',function(e){
jQuery('#ytvideo1').show();
jQuery('#homevideo').hide();
jQuery('#ytvideo').attr("src","http://www.youtube.com/embed/"+$(this).data('vid')+"?autoplay=1");
});
If you have more than 1 video, it could be useful to store the url to the video in the html and use a class instead of an id.
Also, if you put the preview image into the background, behind the video, it will stay there until the iframe has loaded, reducing that "flickering" effect when clicked.
I also restructured the markup a bit to reduce redundancy, here I specify the size of the video and the video id only once.
Also, you should use jQuery's .one('click') instead of .click(), since you want that event listener removed after it has fired the first time.
html:
<div class="ytvideo"
data-video="73sgatbknvo"
style="width:939px; height:528px; background-image:url(http://lorempixel.com/939/528/)">
<div class="seo">
Have a meaningful description of the video here
</div>
</div>
CSS:
.ytvideo {
background-position: center;
background-size: contain;
background-repeat: no-repeat;
cursor: pointer;
}
.ytvideo iframe {
border-style: none;
height: 100%;
width: 100%;
}
.ytvideo .seo {
display: none;
}
jQuery:
$('.ytvideo[data-video]').one('click', function() {
$(this).html('<iframe allowfullscreen src="//www.youtube.com/embed/'+$(this).data("video")+'?autoplay=1"></iframe>');
});
If you want to support browsers with no script support, you'd have to add a "noscript" element in the .ytvideo div that already contains the iframe.
fiddle:
http://jsfiddle.net/6ARc7/

Hover option, or javascript

I'm making a practice website and I'm trying to add a hover effect to an image, the image being arrows to click back or forward. I assume something is wrong with the code, within its structure, or perhaps I would need to use javascript to achieve a rollover effect.
I made a fiddle to show the current work: http://jsfiddle.net/Z7VTy/1/
...I'm new to everything.
<body>
<div id="slider_wrapper">
<div id="slider_container">
<div class="controllers" id="previous"></div>
<div id="slider">
<img src="Images/slide_two.png" width="960" height="425" />
<img src="Images/slide_one.png" width="960" height="425" />
<img src="Images/slide_three.png" width="960" height="425" />
</div>
<div class="controllers" id="next"></div>
</div>
</div>
</body
not sure I understand your issue
demo
#previous:hover {
background-image: url(left_on.png);
}
would change the image
You can change slider_wrapper container from div to a tag and use hover state for the slider_wrapper. change display mode for #previous and #next to none, and add following style
#slider_wrapper:hover #previous, #slider_wrapper:hover #next{
display:block;
}
see an example here http://jsfiddle.net/Z7VTy/3/

Categories

Resources