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
Related
I use a tab to change between videos server but I have a problem. When I click on another tab the video in the first tab keeps playing I was tried some method & function but is not working with me and I don't know any thing about JavaScript if any one can help me I would really appreciate the help
<div class="mtabs_wrapper">
<!-- Original tabs START -->
<div id="mtabs">
<ul>
<li>Openload</li>
<li>Streamango</li>
<li>Ok.Ru</li>
<li class="active">Upvid</li>
</ul>
</div>
<div id="mtabs_content_container">
<div id="tab1" class="mtab_content">
<p><a id="simulate" href="#mtabs_wrapper#mtabs_content_container#tab2">
<iframe class="resp-container" src="https://oload.club/embed/CAr3JJIPf8Y/" height="485" style="width:100%; name="search_iframe" frameborder="0" allowfullscreen="allowfullscreen" sandbox="allow-forms allow-pointer-lock allow-same-origin allow-scripts allow-top-navigation" ></iframe>
</div>
<div id="tab2" class="mtab_content">
<iframe class="resp-container" src="https://oload.club/embed/CAr3JJIPf8Y/" height="485" style="width:100%; name="search_iframe" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>
<div id="tab3" class="mtab_content">
<iframe class="resp-container" src="https://oload.club/embed/CAr3JJIPf8Y/" height="485" style="width:100%; name="search_iframe" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>
<div id="tab4" class="mtab_content" style="display: block;">
<iframe class="resp-container" src="https://oload.club/embed/CAr3JJIPf8Y/" height="485" style="width:100%; name="search_iframe" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>
<!-- Original tabs END -->
Try this. I've used windows event
$(window).focus(function() {
$('#video_id').play();
});
$(window).blur(function() {
$('#video_id').pause();
});
Update
Quoted from here
Firefox will only obey requests to raise a window if a security option
is set, and it's not set by default. Chrome won't pay attention to
focus() requests at all, as far as I can tell. Safari does obey
focus() request.
The specific Firefox setting is in the "Tools" -> "Options" ("Edit ->
Preferences" on Linux, maybe MacOS) dialog. There's a "Content" tab,
and in that there's a checkbox for enabling Javascript. Along with
that is an "Advanced" button that brings up another dialog, wherein
one finds a checkbox to allow (or disallow) the raising and lowering
of windows by page code.
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 have tried to test other questions using StackOverflow, but I couldn't get it to work.
The frame will not scroll to the anchor.
<iframe src="http://coder0.weebly.com/browsers-images.html#B0" width="95%" height="50" target="_parant" id="comfra" frameborder="0" scrolling="no">
<p>Please click here</p>
</iframe>
The id is B0.
The iframe can't be used like that. Please check: What is iframe used for?
You can't add content to an iframe tag like that.
You can check this javascript solution:
Insert content into iFrame
I am trying to insert a youtube video with a custom thumbnail to my website. Therefore I found this code, which I am using.
<div onclick="this.nextElementSibling.style.display='block'; this.style.display='none'">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=myImage" style="cursor:pointer" />
</div>
<div style="display:none">
<iframe width="420" height="315" src="https://www.youtube.com/embed/TlMNLFiARBA?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
It works so far, but the autoplay makes the video play behind the cover image. So I've tried to add the autoplay parameter onClick, so it changes to true as the cover hides.
I have tried to use
<div onclick="this.nextElementSibling.style.display='block';this.nextElementSibling.href + '?rel=0&autoplay=1'; this.style.display='none'">
But this isn't working. To be honest, I have no background in JS and do not know what I am doing. Could anybody please help me with this? Just adding a URL parameter to a given Link onClick.
thank you.
I think you are not doing things the right way.
when you change the url of the iframe, the iframe will reload, not just start to play.
try this:
<div onclick="this.nextElementSibling.style.display='block';this.nextElementSibling.children[0].src='https://www.youtube.com/embed/TlMNLFiARBA?rel=0&autoplay=1'; this.style.display='none'">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=myImage" style="cursor:pointer" />
</div>
<div style="display:none">
<iframe width="420" height="315" frameborder="0" allowfullscreen>
</iframe>
</div>
this will show the iframe and change the url the same time.
I'm currently trying to implement a content locking system to my site and as part of it would like to lock out an on-site mp3 player until the user has completed an offer.
So when the page loads it shows the player, but if they try to click on it, it pops up the content locker and once they've completed an offer it swaps the DIV for the fully usable player.
here's the code:
<div id="mobmp3">
<div id="yoursecDiv" style="display:block; z-index: 999;"> <a href="javascript:void(0)" onclick="var fileref=document.createElement('script');fileref.setAttribute('type','text/javascript'); fileref.setAttribute('src', 'http://c.themixtapesite.com/locker.js?guid=0512eafd69b18d22');document.body.appendChild(fileref); setTimeout(yourFunction, 3000);">
<iframe src="http://themixtapesite.com/wp-content/plugins/amazon-s3-cloud-mp3-player/html5/html5mob2.php?bucket=mixtape2" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" width="97.4%" height="280" max-width="97.4%">
</iframe>
</a>
</div>
</div>
<!-- Place the Real Link within yourfirDiv which is set to not display
until yourFunction has been executed. -->
<div id="yourfirDiv" style="display:none;">
<iframe src="http://themixtapesite.com/wp-content/plugins/amazon-s3-cloud-mp3-player/html5/html5mob2.php?bucket=mixtape2"
frameborder="0" marginheight="0" marginwidth="0" scrolling="no" width="97.4%"
height="280" max-width="97.4%"></iframe>
</div>
So, as you can see, i'm trying to load up an iframe (the player) within yoursecDiv. then once they've completed the offer it reloads yourfirDiv which is the same player but without the content locker.
I was hoping by wrapping the <iframe> in the <a> tag i would achieve this, but alas, it doesn't work.
So i guess my question is:
Is there a way i can overlay a div (or something) over the iframe to act as the link to open the content locker?
this is now solved... after a bit of fresh air my brain started working and i simply used a transparent gif that i overlayed over the div. then set that gif as the trigger link.