I want to place a "PLAY" div above each iframe. I want to do it automatically.
I manage to do that manually but I don't know how to do it with a script , or with css.
Here is my HTML markup :
<ul data-role="listview" id="resultat"></ul>
And my Javascript code :
$('#resultat').append('<li class="liste" ><iframe id="ytplayer" type="text/html" width="140" height="100" src="http://www.youtube.com/embed/RD98kNOBrNs?hd=1&rel=0&autohide=1&showinfo=0&wmode=opaque" frameborder="0"/></li>').listview("refresh");
I'm using z-index and position attributes to place my div manually above the iframe, but I don't think it's a good idea to do it automatically.
Thanks
In addition to Matyas his answer, I have altered his code a bit such that it is now fully implementable.
First, take a look at the demo before I will explain all the details:
SEE DEMO CODE HERE
As you can see, I 'soft coded' all the widths and the heights such that the overlayDiv is placed exactly in the middle of the iFrame.
You can change the width and the height of the overlayDiv to whatever you want and the script will automatically adjust the position of the start button.
What is very important is that you must have the following order in your HTML for this to work:
<div id="vidFrame" class="play">
<iframe id="video" class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/-PZLM-CmuJ0?wmode=opaque&hd=1&rel=0&autohide=1&showinfo=0&enablejsapi=1" frameborder="0"></iframe>
</div>
<div class="overlayDiv">
<img src="https://www.ameliaconcours.org/UploadedContent/Lamborghini%20Logo_Crest_4C_S.png" alt="facebook" width="90px" />
</div>
Where the width and height of vidFrame doesn't have to be established beforehand because it will become the height of the iFrame.
Also, mind the following details:
wmode=opaque is the first argument we give to the video (must be the absolute first)
we enable the enablejsapi=1 such that we gain control over playing (and pausing) the video
The jQuery that I use is the following:
$.fn.loadOverlay = function() {
$('iframe').each(function(idx, iframe){
var imageHeight = $('.overlayDiv').height();
var imageWidth = $('.overlayDiv').width();
var marginTop = $('#video').height();
var marginTop = marginTop/2-imageHeight/2;
var marginLeft = $('#video').width();
var marginLeft = marginLeft/2-imageWidth/2;
$('.overlayDiv')
.clone()
.appendTo('body')
.css({
top: marginTop,
left: marginLeft,
}).show();
});
}
Note that, eventhough it is lengthy, it explicitly calculates the middle of the iFrame. Hence, shorter methods are possible but this one will make you understand exactly what is happening.
Now another thing: yt players always have the ugly red play button in the middle of their iFrame when loading a video.
There is a little hack to make this button disappear, namely:
function onPlayerReady(event){
//THIS IS THE TRICK THAT YOU MIGH WANT TO REMOVE
player.playVideo();
player.pauseVideo();
}
So essentially we play and then immediately pause the video to make the button disappear.
But mind you: this wil not work on mobile devices. A very big advantage of this is that the video will automatically start buffering which is an advantage for the user.
Furthermore, the jsFiddle is self-explanatory so just read it through and try to understand it.
I hope this answers your question. Good luck!
$('iframe').each(function(idx, iframe){ // for each iframe
var $iframe = $(iframe); // take its jquery reference
$('.overlayDiv') // grab the overlay template you wish to place over each
.clone() // clone it
.appendTo('body') // add it to the end of your page
.css({ // resize and position the overlay
top: $iframe.offset().top, // to fit just above the iframe
left: $iframe.offset().left,
height: $iframe.height(),
width: $iframe.width(),
}).show(); // show the hidden (by CSS) overlay
});
Initially your .overlayDiv should have the following styles:
.overlayDiv {
position: absolute; /* so when we position by js it will be above the iframe*/
display: none; /* the master tempalte should be hidden */
z-index: 4953; /* make sure the overlay appears above other elements */
}
I haven't tested it out, Just written it from scratch while my build was running. But this is the idea I'd go with. You might have to tinker with the positioning.
Related
i have a div with unique id and inside of this i have a youtube iframe code.
I am trying to develop a sticky div and when the users scrolls down to fade out the default div that holds the youtube iframed video and move it to a this new sticky div and start play.
So far i am developing the code bellow:
Inside body:
<div id="newdiv" style="display:none;"></div>
<div id="currentplayer">
<iframe width="600" height="338"
src="//www.youtube.com/embed/avl5zgk3KH4?rel=0" frameborder="0" allowfullscreen>
</iframe>
</div>
The code so far for the sticky div is:
<script type="text/javascript">
$(function () {
$(window).scroll(function () {
var stickyHeaderTop = $('#currentplayer').offset().top;
if ($(window).scrollTop() > stickyHeaderTop) {
$('#currentplayer').hide();
$('#newdiv').css({
position: 'fixed',
top: '35px',
width: '310px'
});
$('#newdiv').fadeIn("fast");
} else {
$('#newdiv').fadeOut("fast");
$('#currentplayer').show();
}
});
});
</script>
So how is possible when the user scrolls up to move the current iframe inside the new div with id="newdiv" and resume play?
Thanks
using jQuery appendTo should do the trick ...
$( "#currentdiv iframe" ).appendTo( $( "#newdiv" ) );
You could use the jquery command .html to both get and set the html contents of a div.
However, I imagine that copying the iframe to a new div will mean the video will play from the beginning. If that is a problem, then you should try and achieve this by changing the currentplayer css instead. Perhaps have a div on the outside of currentplayer with a set height and use this to detect the position the user is on the page instead.
If that is not possible, then look into using the YouTube api, as you will then be able to access data like how much of the video has played and tell the second video area to start playing from this point.
I've been looking around the web for an answer for a couple of hours and cannot find anything so I'm hoping someone can help me.
I want to take the height of a wrapper div who's class is movie and apply it to an inner div who's class is movie-center. How can I do this using JS or jQuery?
I am a newbie when it comes to JS, so I would really appreciate if you could lay everything out for me (including any HTML needed).
Thank you!
EDIT 1: Maybe if I am explaining what I am doing people will have a better understanding. I am making a responsive WordPress theme. As the width of the browser is smaller, the movie widths are smaller. I want the overlay title and graphic to stay in the center. I tried doing this with CSS and it cannot be done fully unless I know the exact height (which I won't because of resizing).
EDIT 2: here is the browser's rendered html code:
<article id="movie-97" class="post-97 movie type-movie status-publish hentry"><a href="http://localhost:8888/movies/hard-truth-levity-hope">
<div class="movie-center">
<div class="movie-overlay">
<div class="movie-play"></div>
<h2 class="movie-title">Hard Truth, Levity and Hope</h2>
</div> <!-- end .movie-overlay -->
</div> <!-- end .movie-center -->
<div class="movie-thumb"><img width="480" height="270" src="http://localhost:8888/wp-content/uploads/2014/03/truth-levity-hope.jpg" class="attachment-movie-thumb wp-post-image" alt="Hard Truth, Levity and Hope" /></div>
EDIT 3: Here's a Pastebin for my website. Note: it has been stripped down to only show the essential parts of the site.
What you've done is the correct way. Make sure you've loaded jQuery properly and try to wrap your code inside DOM ready handler $(document).ready(function() {...}); or shorter form $(function() {...});
$(function() {
$('.movie').each(function() {
var h = $(this).height();
$(this).find('.movie-center').height(h);
});
});
Edit: Since you're using Wordpress, there's probably a conflict happen here, try to use:
jQuery(document).ready(function($) {
$('window').resize(function() {
$('.movie').each(function() {
var h = $(this).height();
$(this).find('.movie-center').height(h);
});
}).resize();
});
Please try this :
/* Get height of .movie thumb preview */
jQuery(document).ready(function($) {
$('.movie').each(function() {
var h = $(this).height();
console.log(h);
$(this).find('.movie-center').first().css('height',h);
console.log($(this).find('.movie-center').first().height())
});
});
Connor,
This will get you what you're looking for:
jQuery(document).ready(function($) {
$('.movie').each(function() {
var h = $(this).height();
$(this).find('.movie-center').height(h);
});
});
A quick explanation. You'll notice that jQuery's .height() function is called twice. First, without any params and then with h passed in.
Pull up your JS console (cmd+opt+j if you're using Chrome) to see how this actually works.
The question at the top of this page has an id of #question-header, so if you enter this in the console $('#question-header').height() you'll see that it returns 36. That's because that element is 36 pixels tall.
So, calling .height without any params will return the height of the selected element. But, we can set the height by passing in a number. Try this by pasting this in to the JS console:
$('#question-header').height(1000)
The header is now 1000px tall!
The third line of the code basically says, "Hey, within this particular instance of the .movie article, find the .movie-center element and set the height.
So, there you go. Some working code and hopefully an explanation as to exactly why/how to use it in the future.
I'm working on a simple script that acts as a slideshow.
It's based on this script.
Background:
Most of these types of scripts (including the more advanced ones) have the issue that they work great with landscape-style images but really mess portrait-style images up. So I'm trying to build something more or less from scratch.
Problem
I want my images centered on the page. So I use position:absolute; and left:50%; and top:50%; which puts left-most and top-most edge of the image in the proper position. But to center it you would need to do left:50% - imageWidth/2 (which obviously doesn't exist in CSS)
So I need to use javascript to get the image height/width and change it's left and top positioning as needed.
Here is my HTML:
<div class="fadewrapper">
<div class="fadein">
<img src="../Content/images/samples/1.jpg">
<img src="../Content/images/samples/2.jpg">
<img src="../Content/images/samples/3.jpg">
</div>
</div>
Here is my CSS:
.fadewrapper {width:100%; height:100%;}
.fadein { display:inline-block;}
.fadein img {position:absolute; top:50%;}
My knowledge in javascript is limited, but I've found this script (on SO):
var img = new Image();
img.onload = function () {
alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';
This script works, but I don't know how to use the images on my page and how to then adjust its positioning. Any and all help is very much appreciated.
Here you go. This will set the image in the exact center of the wrapper.
win_width = $('#fadewrapper').width();
win_height = $('#fadewrapper').height();
border = $('#framewrapper').css('borderWidth');
$('.fadein img').each(function(){
$(this).css({
'left' : (win_width - $(this).width() - border ) / 2,
'top': (win_height - $(this).height() - border ) / 2
});
})
Here's a jsFiddle working example. It reacts based on the window size. Resize the output window to see it react
This might be worth of trying:
<DIV style="position:relative;top:100px;height:300px;text-align:center;white-space:nowrap">
<IMG id="your_img_id_1" src="your_img_source" height="100%">
<IMG id="your_img_id_2" src="your_img_source" height="100%">
<IMG id="your_img_id_3" src="your_img_source" height="100%">
</DIV>
Add these positioning rules to your fadewrapper-class, and remove all others. Then make changes needed to top and height values, but don't change the height-attribute values in IMG-elements. IDs can be omitted, if you don't need them.
EDIT:
I'm sorry, I didn't notice to check window resize. Code corrected. Width's shoul'd be OK with smaller window sizes now.
I've tested this in IE, FF, Opera and Chrome. In all those browsers images appear just like I want to. But if I've missunderstood what you'd like to have?
I have an iframe from the middle to bottom on a page. When I load the page it scrolls to the bottom. I tried to body onload window.scroll(0,0) but it does an ugly effect because it first goes down and then immediately scrolls up.
What's the cause of this automatic scroll to bottom with iframe on the page?
This is just a random one, but possible doing something like this:
<iframe style="display: none;" onload="this.style.display='block';" src="..."></iframe>
The thinking being that if it is some focus stealing script on a remote page that you can't control, the browser won't focus a hidden element. And there's a good likelihood that your onload will fire after their focus changing script.
Or, one other option that might be a bit more reliable:
<iframe style="position: absolute; top: -9999em; visibility: hidden;" onload="this.style.position='static'; this.style.visibility='visible';" src="..."></iframe>
Here we're basically saying hiding the frame and moving it to a negative offset on the page vertically. When it does try to focus the element inside of the frame, it should scroll the page upward, then once loaded place the iframe back in it's intended position.
Of course, without knowing more, it's hard to say for sure which tradeoffs are okay, and both of these options have conditions that are a tad racy, so YMMV.
I hope that helps :)
I came up with a "hack" that works well. Use this if you don't want your webpage to be scrolled to anywhere except the top:
// prevent scrollTo() from jumping to iframes
var originalScrollTo = window.scrollTo;
window.scrollTo = function scrollTo (x, y) {
if (y === 0) {
originalScrollTo.call(this, x, y);
}
}
If you want to disable autoscrolling completely, just redefine the function to a no-op:
window.scrollTo = function () {};
Similar method but using classes.. I added a class to the iFrame's parent div of "iframe_display" with a style inside that of visibility: hidden. On page load I then used jQuery to remove the class
.iframe_display{visibility:hidden}
$(function(){
$('#iframe_wrapper').removeClass('iframe_display');
});
This takes the focus away from the iFrame and stops the scrolling down to the iFrame on page load
Simple. Use about:blank in src like
<iframe id="idName" name="idName" src="about:blank" style="display:none"></iframe>
The src="about:blank" trick provided by Leandro & edited by Spokey worked for me, but I'd like to share a workaround I was using before.
A temporary solution I found was to embed the iframe in the uppermost element on my page (nav, header etc), so that even if the browser wants to jump to focus, it 'jumps' to the top element. This still can cause a slightly perceptible jump, which might bug you.
To make sure the iframe remains hidden if you choose to place it near the top of a page, I applied an inline style of style="visibility:hidden; height: 0px; width: 0px;". I guess you could also use a z-index combo.
This seems to work well:
<iframe src="http://iframe-source.com" onLoad="self.scrollTo(0,0)"></iframe>
This is the solution I came up with and tested in Chrome.
We have an iframe wrapped by a div element. To keep it short, I have removed the class names related to sizing the iframe. Here, the point is onMyFrameLoad function will be called when iframe is loaded completely.
<div class="...">
<iframe onload="onMyFrameLoad()" class="..." src="..."></iframe>
</div>
Then in your js file, you need this;
function noscroll() {
window.scrollTo(0, 0);
}
// add listener to disable scroll
window.addEventListener('scroll', noscroll);
function onMyFrameLoad() {
setTimeout(function () {
// Remove the scroll disabling listener (to enable scrolling again)
window.removeEventListener('scroll', noscroll);
}, 1000);
}
This way, all the scroll events become ineffective till iframe is loaded.
After iframe is loaded, we wait 1 sec to make sure all the scroll events (from iframe) are nullified/consumed.
This is not an ideal way to solve your problem if your iframe source is slow. Then you have to wait longer by increasing the waiting time in setTimeout function.
I got the initial concept from https://davidwells.io/snippets/disable-scrolling-with-javascript/
is there a way to embedd youtube video as a background of a web page with html, css and javascript with the actual site content on top? how?
basically, it should be a video that auto plays, is muted (but the volume can be turned up by the visitor) and the site should work well being on top of it (the site is minimal so most of the video should be visible at all times). the site is minimal enough that no scroll bars would be visible by default in most browsers and the video should be 100% width and height.
examples? links?
tried Google but couldn't find it.
also it should work for videos not on youtube.
html5 and css3 preferred :)
I REALLY NEED A LIVE EXAMPLE SOMEWHERE (or as close to) because i tried it all (as available via google and failed)
also, related - there doesn't seem to be (as per my own research) any way of slowing down the play of youtube videos (for example: 24 times slower) - true / false?
You have probably found a solution by now but just in case you haven't...have you tried http://www.seanmccambridge.com/tubular/ ?
<div style="position: fixed; z-index: -99; width: 100%; height: 100%">
<iframe frameborder="0" height="100%" width="100%"
src="https://youtube.com/embed/ID?autoplay=1&controls=0&showinfo=0&autohide=1">
</iframe>
</div>
// Replace ID with the actual ID of your YouTube video
http://www.labnol.org/internet/youtube-video-background/27933/
you got this library as well:
http://florian-chapon.fr/dev/youtube-background/
the only thing you have to do, is include the js file, and put this script on your "body":
$(document).ready(function() {
ytbg("vQWlNALvbhE", 0, 17, 1);
});
As an explanation:
ytbg("video link", starttime, endtime, volume).
for completeness sake adding http://okfoc.us/okvideo/ here. Also does Vimeo.
There are two ways to answer this question:
Set the flash player's wmode to transparent, put it in an absolute div with a low z-index. Put the content in another absolute div with a higher z-index.
Don't do it. Seriously. Don't put a movie behind the site's main content. You are aliening your customer base, making the site hare to view and read, and violating about a dozen or two other guidelines in good site design. Why not put the video inside the flow of the document where it belongs instead?
Well you could absolute position the tag or the , use CSS to set the height and width. Use javascript to simulate clicking on the button. set the element zIndex to the background.
Hi, as tubular is quite suffisticated, i extracted the necessary code
for you.
html code:
<div id="player-container" style="overflow: hidden; position: absolute; width: 100%; height: 100%;">
<div id="player" style="position: absolute">
</div>
here comes the complete youtube API cover style stuff, extracted from
tubular. jquery is needed. Also the standard youtube html5 iframe api
code must be included - as given here:
https://developers.google.com/youtube/iframe_api_reference#Getting_Started
var ratio = 16 / 9;
window.onPlayerReady = function (e) {
resize();
}
$(window).on('resize', function () {
resize();
})
var resize = function () {
console.log("resize");
var heightcorrection = 0,
width = $(window).width(),
pWidth, // player width, to be defined
height = $(window).height() - heightcorrection,
pHeight, // player height, tbd
$videoPlayer = $('#player');
if (width / ratio < height) { // if new video height < window height (gap underneath)
pWidth = Math.ceil(height * ratio); // get new player width
$videoPlayer.width(pWidth).height(height).css({
left: (width - pWidth) / 2,
top: 0
}); // player width is greater, offset left; reset top
} else { // new video width < window width (gap to right)
pHeight = Math.ceil(width / ratio); // get new player height
$videoPlayer.width(width).height(pHeight).css({
left: 0,
top: (height - pHeight) / 2
}); // player height is greater, offset top; reset left
}
}