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
Related
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>
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>');
})
Essentially the Iframe from the Vimeo embed link does work individually, however, I am working on a global editor for displaying all posts. using javascript seems to be the only answer, but if someone knows a way to use a simple <video></video> tag with a Vimeo URL let me know.
Here is what I have
[wpv-post-date]
[types field='date'][/types]
[types field='bible-passage'][/types]
[types field='mp3'][/types]
<div class="audio-player"><div id="play-btn"></div><div class="audio-
wrapper" id="player-container" href="javascript:;"><audio
id="player"><source src="[types field='mp3' output='raw'][/types]">
</audio></div></div><a class="x-btn black-button x-btn-global sermon-
button sermon-audio" href="[types field='mp3' output='raw'][/types]"
target="_blank">Download</a>
<iframe src="https://player.vimeo.com/video/229578292?
title=0&byline=0&portrait=0" width="640" height="360" frameborder="0"
webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p>You Shall Not Steal
from <a href="https://vimeo.com/tomballbible">Tomball Bible
Church</a> on Vimeo.</p>
[wpv-post-featured-image]
[types field='sermon-image'][/types]
[wpv-post-taxonomy type="preacher" separator=", " format="link"
show="name" order="asc"]
The first source for the Vimeo player needs to remain in that format however the number at the end needs to change.
The "video" field has the auto-generated URL already so maybe I could pull the number from that? I am not familiar with java script.
I've been googling for a while but i didnt get any good results for my problem. I also ready many times the youtube api reference from gdocs.
Im trying to stop a youtube video by clicking on a link.
html:
<div class="box_filme rel_trailer">
<iframe id="iframe_player" width="420" height="315" src="http://www.youtube.com/embed/8Af372EQLck?enablejsapi=1&version=3&playerapiid=ytplayer" frameborder="0" allowfullscreen></iframe>
</div>
script src:
<script type="text/javascript" src="http://www.youtube.com/iframe_api"></script>
js code im trying:
$(function(){
$('.info_filme .filme').click(function(){
$('iframe_player').stopVideo();
});
});
part of the html that the clicks are placed
<ul class="info_filme">
<li><a class="filme sinopse active" data-info="rel_sinopse">Sinopse</a></li>
<li><a class="filme trailer" data-info="rel_trailer">Trailer</a></li>
<li><a class="site" href="">Site</a></li>
</ul>
In fact I had success calling the url link from js but i have to use iframe and i don't know what im doing wrong.
If someone could help me i'd be very grateful.
The problem is that you're calling .stopVideo() on a jQuery object, not on a YouTube player object. The YouTube API does not export its control functions to the iframe element, and certainly not to jQuery.
Rather than creating the iframe yourself, try letting the YouTube API do it for you, as in the basic example in the YouTube iframe API docs.
var player = new YT.Player($('.rel_trailer')[0], {
height: '315',
width: '420',
videoId: '8Af372EQLck',
events: {
'onReady': function() {
$('.info_filme .filme').click(function(){
player.stopVideo();
});
},
'onStateChange': onPlayerStateChange
}
});
The first parameter that gets passed to YT.Player is the DOM element in which you want YouTube to put the video.
The YouTube API gets a bit tricky, since a lot of what it does is asynchronous. If you want something a whole lot easier, Popcorn.js can wrap a YouTube player in an API that mimics a HTML video element (as I describe in this answer).
You need to load up these scripts:
<script type="text/javascript" src="popcorn.js"></script>
<script type="text/javascript" src="popcorn._MediaElementProto.js"></script>
<script type="text/javascript" src="popcorn.HTMLYouTubeVideoElement.js"></script>
You can get them here, here and here. (This repo is a few bug fixes ahead of the official Popcorn repo for YouTube.)
Next, just provide an empty element for the video.
<div class="box_filme rel_trailer"></div>
Now, create the wrapper and attach the click handler.
var video = Popcorn.HTMLYouTubeVideoElement($('.rel_trailer')[0]);
video.src = 'http://www.youtube.com/watch?v=8Af372EQLck';
$('.info_filme .filme').click(function(){
video.pause();
});
Popcorn will handle loading YouTube's API and all the asynchronous events that follow. It's a fair amount of unnecessary javascript to load if you're not going to use Popcorn's main annotation functions, but it'll save you a lot of time if you don't want to be bothered mucking about with YouTube's API. And you'll be able to easily adapt the code if you want to have vides from multiple sources (e.g. HTML5, Vimeo).
Why don't you embed the video into your page like below?
<embed id="playerid" width="100%" height="100%" allowfullscreen="true" allowscriptaccess="always" quality="high" bgcolor="#000000" name="playerid" style="" src="http://www.youtube.com/apiplayerbeta?enablejsapi=1&playerapiid=normalplayer" type="application/x-shockwave-flash">
You can then stop the video using:
var myPlayer = document.getElementById('playerid');
Stop Video
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