Vimeo iframes for Toolset Post Archives - javascript

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.

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

How does Astronaut.io hides the "watch later" , the uploader's profile picture and "share" logo on their youtube embedded player?

On some of the youtube videos (not all of them), the astronaut.io script manages to remove the uploader's profile picture, the watch later logo and the share logo. I was wondering if someone could tell me how they managed to remove that much information out of their embedded player.
Thanks!
<iframe id="p2" frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" width="1" src="https://www.youtube.com/embed/?controls=0&showinfo=0&modestbranding=1&enablejsapi=1&origin=http%3A%2F%2Fastronaut.io&widgetid=2" height="0" style="position: fixed; top: 0px;"></iframe>
look at the src of the iframe that the video is in. You'll see it has some parameters after a ?, separated by &s. This bit after the ? is called a query string and it's how you pass parameters via a URL. The one's here are:
controls = 0
showinfo = 0
modestbranding = 1
enablejsapi = 1
origin = http://astronaut.io
widgetid = 2
you'll notice that origin has some weird characters in it, that's because if you sent : and / directly it would mess things up, so they have to represented a different way.
It looks like showinfo = 0 and controls = 0 are probably what's causing the behaviour you're observing. If not, it's definitely some combination of the ones above.

Youtube iframe video not showing in Wordpress

I've created a template for one of the pages on my wordpress site & I've added a couple of youtube videos within an iframe but they're not showing. On a blank index.html file that is hosted on my computer is it shown but not when I upload it to Wordpress. When I inspect the page the iframe is there (shown below)
Does anyone know what I'm doing wrong?
HTML:
<p class="reveal1">
Some more text.
<div class="video-container1" align="center">
<iframe width="560" height="315" src="https://www.youtube.com/embed/JfHXbPv9cUg" frameborder="0" allowfullscreen></iframe>
</div>
</p>
<div id="more1" align="center" title="View More">
<img src="http://www.blackballad.co.uk/wp-content/uploads/2016/10/drop.png" width="20px" height="20px">
</div>
JavaScript:
$(document).ready(function(){
$("#more1").click(function(){
$(".reveal1").slideToggle("slow");
$(".video-container1").slideToggle("slow");
});
});
Console errors:
Don't make the iframes yourself. Instead, use the JavaScript published in the iframe API

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

Categories