Change the body background based on specific div's attribute - javascript

I do have a div which will load youtube videos with ajax and the div ID would be change based on the video is playing on it.
I was wondering if there is anyway to get the div ID and change the body background based on that.
<div id="video-load">
<iframe id="player_ID" video-id="player_ID" src="http://www.youtube.com/embed/<?= get_field('youtube_video_id_main'); ?>?enablejsapi=1&rel=0&autoplay=1&controls=2&showinfo=0&vq=hd720" frameborder="0" allowfullscreen></iframe>
</div>
$('iframe').each(function(){
$(body).css('background', $(.this).attr('video-id'));
});
Any help would be appreciated.

You have to replace (body) by ('body'). The FIDDLE:
http://jsfiddle.net/hz5rppy7/

Related

Trying to use a embedded youTube link for auto play in custom HTML

I am trying to implement a embedded youTube link to a custom Html page and setting it to autoplay but as I open my Homepage video doesn't play and only played when clicked .
<iframe width="1560" height="415" src="https://www.youtube.com/../?autoplay=1"
frameborder="0" allowfullscreen></iframe>
I want to make it responsive.
I'm not sure if this helps or even works but have you tried something like this?
$(document).ready(function() {
$(iframe).click();
});
You said https://www.youtube.com/../?autoplay=1
Get rid of that slash before the question mark
I think it should be https://www.youtube.com/viddata?autoplay=1 instead.
Maybe thats why its not playing
Get rid of the slash in the URL like Coder2195 said (https://www.youtube.com/viddata?autoplay=1). Also try to add this script to the HTML file:
<script>
window.onload = function() {
var videoElement = document.getElementById("videoElement");
videoElement.click()
}
</script>
And make the iframe element have a custom id:
<iframe id="videoElement" width="1560" height="415" src="https://www.youtube.com/../?autoplay=1" frameborder="0" allowfullscreen></iframe>

How can I remove the youtube video controls using javascript?

I'm working on an extension and I need help to remove the video controls and replace it with the native browser controls.
This is what I have
document.getElementById("(*YOUTUBE CONTROLS*)").innerHTML = "<video controls>"
You can hide youtube controls with ?controls=0 after src
ex:
and some more customization.
To reskins the player you can write a custom jquery of js function to edit the content of the frame after it's loaded.
Here's and example
HTML
<iframe width="800" scrolling="no" id="prev" src="">your browser needs to be updated.
</iframe>
jquery
$(document).ready(function() {
$('#prev').contents().find('body').html('<div> blah </div>');
})

Insert YouTube player with JQuery HTML

I'm almost done with my mini-project which I have put a lot of work into! The only thing is now that I need to put a Youtube link player into the HTML and I don't really now how to start.
So what I'm doing is that I take information from my API where its already have a YouTube link ready for example https://youtu.be/Mh2ebPxhoLs and now I need it to be shown in my HTML as a YouTube player. Only problem I don't really know how to start it.
This is how my site looks right now:
As you see there is a YouTube trailer link at the bottom which I haven't got to that "level" yet and need your help for it!
Basically its a trailer from the movie I'm searching for and I want it to be under the poster, somewhere there but I can do it by myself. Only problem is now I just need to know how to make a YouTube player to understand the YouTube link.
Right now I'm using in my HTML a
<div id="trailer"></div>
JS:
$('#trailer').html("Trailer: " + data.trailer);
and I have no CSS for the trailer yet.
So I just want to know, how can I make the link understand and fill my HTML with the YouTube player?
From what I understand you want to get the id from the link and use that to fill the html with the youtube iframe. You can do this by using replace.
var videoId = data.trailer.replace("https://youtu.be/", ""); //Leaves just the id
$('#trailer').html("Trailer: <iframe width='420' height='315' src='https://www.youtube.com/embed/" + videoId + "' frameborder='0' allowfullscreen>");
Take an iframe for HTML
<iframe id="videoArea" width="350" height="250" src="http://www.youtube.com/embed/X0DeIqJm4vM" frameborder="0" allowfullscreen></iframe>
Then with your links you can create a property mapper to the iframe:
$('#videoArea').prop("src", data.trailer);
DEMO

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

How to make a div of iframe float on top of another div of iframe that should be the background of the page

I read many related questions but my case seems a little bit different that none of those really work for me.
What I'm trying to achieve is to have a floating radio player that play nonstop music throughout my blog. I'm using iframe to put my blog as the background of the whole page, then another iframe for the radio player that float on top the previous iframe.
I guess the reason that all methods I found couldn't work is because the property of my iframe:
<iframe src="my blog address" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="120%" width="120%"></iframe>
Following is what the entire page look like(I need the radio player to float on the top):
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="radio_player">
<iframe src="http://douban.fm/partner/baidu/doubanradio" frameborder="0"></iframe>
</div>
<div id="blog_background">
<iframe src="http://swotong.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="120%" width="120%"></iframe>
</div>
</body>
</html>
I'm quite new to coding and posting questions here, thanks for any help.
Best Regards
try adding z-index:1 to the frame you want on top.
You can see it working here
you have to use a position property for this to work.
position attributes from css3.com

Categories