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