When I try to use video as a background my website the title and buttons appear at the top of the Youtube video. I want the title, watch and share button removed from the top of the Youtube embed. I've tried everything but nothing works.
I have attached my code. I tried to inject it with jQuery but no luck at all.
<iframe src="https://www.youtube.com/embed/5iNr0Tp13hY?mode=opaque&rel=0&autohide=1&showinfo=0&controls=0&wmode=transparent" frameborder="0" width="100%" height="100%"></iframe>
$('iframe').load(function() {
$('iframe').contents().find("head").append($("<style type='text/css'> .ytp-chrome-top.ytp-show-watch-later-title.ytp-share-button-visible.ytp-show-share-title.ytp-show-cards-title { display: none !important; } </style>"));
});
Instead of using an iFrame, use the jquery.mb.YTPlayer, it's way easier.
Call the .js file to your HTML
<script src="style/js/jquery.mb.YTPlayer.js"></script>
And call the video with
<div id="P1" class="player video-container" data-property="{videoURL:'https://www.youtube.com/watch?XXXXXXX',containment:'#video', autoPlay:true, showControls:false, mute:true, startAt:6, opacity:1, loop:1}"></div>
showControls:false hide the controls, you have all the options in the documentation.
Related
I'm building a site that can only be seen through an iframe. I also added a script that auto resize height can be adjusted.
But loading my blog so the added weight of having to load two pages at once. To cope, I apply the OnClick to load the iframe.
Auto Resize But it turned out to not work.
Load Iframe code:
<script type="text/javascript">
function okeBos() {
document.getElementById("iframeControl").innerHTML='<iframe scrolling="no" src="http://name-domain.com" style="border: 0; width: 100%;"></iframe>';document.getElementById("starApps").style.display="none";
};
</script>
<div id="iframeControl"></div><div id="starApps"><span onclick="okeBos()">Load Iframe</span></div>
Do you know how to work the Auto Resize for tricks like this? Please help me, thanks ..
EDIT
The following code snippet Resize My
Stored at sites that are loaded:
<script src='http://britha.com/Upload/MyFile/iframeResizer.contentWindow.min.js' type='text/javascript'></script>
<script>
var iFrameResizer = {
messageCallback: function(message){
}
}
</script>
Stored at the site containing the iframe:
<script src="http://britha.com/Upload/MyFile/iframeResizer.js" type="text/javascript"></script>
<script type="text/javascript">
iFrameResize({
log : true,
enablePublicMethods : true,
enableInPageLinks : true,
});
</script>
UPDATE
What I know about iframes is that they are usually the last on the DOM to load, so you have to expect a lag sometimes. I have neglected to ask if you can even load an iframe successfully by normal means (i.e. in the markup (HTML)). Anyways, I strongly suggest that you load your iframe the normal way because it won't be recognized by the iframe-resizer plugin. It has to coordinate between 2 pages, calculate, and adjust so I'm pretty sure it takes loading times into account. An iframe that pops up whenever the user decides to press a button is like 5 years to a computer (not scientific fact just an exaggeration).
I have made a Plunker and used the example provided by this repository and I added some of my own tests as well. Here is the most important code:
Parent Page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/iframe-resizer/3.5.3/iframeResizer.min.js"></script>
<script>
iFrameResize({options});
Child Page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/iframe-resizer/3.5.3/iframeResizer.contentWindow.min.js"></script>
<script>
MOST IMPORTANT: DO NOT CREATE THE IFRAME DYNAMICALLY
PLUNKER
OLD
Please explain how it doesn't work. It functions in this Snippet...How am I supposed to know what to fix if I do not have the auto-resize script?
SNIPPET
<script>
function okeBos() {
document.getElementById("iframeControl").innerHTML='<iframe scrolling="no" src="http://name-domain.com" style="border: 0; width: 100%;"></iframe>';
document.getElementById("starApps").style.display="none";
};
</script>
<div id="iframeControl"></div>
<div id="starApps">
<span onclick="okeBos()">Load Iframe</span>
</div>
I want to show a loading image icon for the links to external sites when the pop-up is opened through a window.open() function.
I thought of an approach, where show the loading image in a 'div' and get the content of the external site in an Ajax call, then re write the content. Since these are external domains, $.get("external-link") won't work (although might work with some workarounds i don't links).
Is there another approach to tackle this, appreciate pointers. Thanks
Yes, you can load the content into an iframe, showing the loading image when the link is clicked, and hiding it when the iframe has loaded:
click me
<br/>
<div id="dummyloader" style="display: none; width: 500px; height: 500px; background-color: gray"><h2>loading</h2></div>
<iframe src="" id="myframe" style="display: none;" width="500px" height="500px"></iframe>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
$(function(){
$('.ilink').click(function(ev){
ev.preventDefault();
$('#dummyloader').show();
$('#myframe').attr('src', $(this).attr('href'));
})
$('#myframe').load(function(){
$('#dummyloader').hide();
$(this).show();
})
})
</script>
live jsfiddle example: http://jsfiddle.net/L01d5t5a/
How do I create a text hyperlink to an mp3 file without showing the player. For example, if I have the word "play" on my site and it is clicked, the associated mp3 will play without leaving the page and without a visible player. Also, when right clicked, the person has an option to save/download the file. The closest example I have found only allows you to copy the link location and not download/save the mp3 file. Thanks.
<!--[ In the head section of the HTML ]-->
<!--audio-->
<script type="text/javascript">
function play_single_sound() {
document.getElementById('audiotag').play();
}
</script>
<!--/audio-->
<!--[ In the body section of the HTML ]-->
<!--embedded audio-->
<div id="audio">
<audio id="audiotag" src="http://sample.mp3" autobuffer="autobuffer"></audio>
</div>
<!--/embedded audio-->
<!--button/link-->
play
<!--/button/link-->
<!--[ Optional CSS ]-->
div#audio {
display: none;
overflow: hidden;
}
Make the <a> tag point to the mp3 file. When you left-click, use JavaScript to play it. When you right-click, you'll get the built-in menu with a "save link" option.
play
Then in your JavaScript, you can prevent the default action of the link:
<script type="text/javascript">
document.getElementById('audiolink').addEventListener('click', function(e){
e.preventDefault();
document.getElementById('audiotag').play();
});
</script>
The best option would be to use something like SoundManager.
It has a flash fallback for browsers that do not support html5 audio tag.
Demo of normal mp3 pimped up links: play-mp3-links
I found the solution; check edit 1 and 2 below
I've read many questions on this matter but most answers say "make sure you load the new video".
You can see my code below and I'm doing this.
What I'm trying to do in this example is have some kind of colored background (the "bg" div) and when its clicked I want to display a video on top. Ultimately what I want to achieve with this is have multiple images on the page and I want to overlay a video on top of everything according to the image tha was clicked. I'm still a noob in html and js so maybe I can't see the obvious.
Here's the code I use to create a red 500x500 background an load the test1.mp4 on top.
This works just fine.
<!DOCTYPE html>
<html>
<head>
<style>
#video{
z-index:1;
}
#bg {
position:absolute;
z-index:-1;
}
</style>
</head>
<body>
<div id="bg" style="background-color:#900;height:500px;width:500px;" ></div>
<div>
<video id="video" width="480" controls>
<source id="vidSrc" src="C:\Users\Biller\test videos\test1.mp4"; type="video/mp4">
Your browser does not support the video tag.
</video>
//the below script creates pause-play controls when I click on the video
<script>
var myVideo=document.getElementById("video");
myVideo.addEventListener('click',function(){
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
});
</script>
</div>
<script src="jquery-1.11.0.min.js"></script>
<script src="myJQuery.js"> </script>
</body>
</html>
then I use this jquery script (myJQuery.js) to change the video when the red bg is clicked:
$(document).ready(function() {
$("#bg").click(function(){
$("#vidSrc").attr("src","C:\Users\Biller\test videos\test2.mp4");
$("#video")[0].load();
});
});
When I click on the bg the video changes but the new video shows 0:00 on duration and the controls are not working. If I can get this to work I would then hide-unhide the video and change the src url accordingly. I'd appreciate some insight.
edit- I found the problem but I don't know why it's happening: If I put the video I want to change to (in this case 'test2.mp4') in the html directory it works just fine. But if it's anywhere else its not working. As if it cant recognize the path anymore. Any ideas why that may be?
edit2- Ok I found out it has something to do with the backward slash "\". When I replaced that with "/" in the file path, it worked. The "\" works fine when it's in the original html though (I mean when its directly in the video tag as src="C:\users...")
You can find solution here in this post states same issue as yours.
http://stackoverflow.com/questions/5235145/changing-source-on-html5-video-tag
good luck!
I'm at a loss for why my Vimeo videos aren't showing up in a Shadowbox.
I think I have gotten to the simplest point I know how to do, which is to copy and paste the example straight from the github page and then change the shadowbox paths to the correct places on my server (for the .js and .css files).
When I click on the link to the video, I expect the video to display in a shadowbox.
Instead, the page just goes dark (so I know shadowbox is TRYING to do something), but no video, or box appears on the screen.
I added a simple image link to the example page just to test that a simple image will work. It does.
My example code is from: https://github.com/mjijackson/shadowbox/blob/master/examples/vimeo.html
The code is supposed to work like the Vimeo link towards the bottom here:
http://www.shadowbox-js.com/index.html
My actual working page can be found at:
http://zanezmiller.com/hidden/video-test.html
Here is the complete code to the sample page I am attempting to get to work:
(Thanks in advance for any help)
<html>
<head>
<link rel="stylesheet" type="text/css" href="/shadowbox/style.css">
<link rel="stylesheet" type="text/css" href="/shadowbox/shadowbox.css">
<script type="text/javascript" src="/shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({}, function() {
Shadowbox.setup('a[title="Egypt/Lebanon Montage"]', {
height: 360,
width: 640,
flashVars: {
clip_id: "7058755",
autoplay: "1"
}
});
Shadowbox.setup('a[title="Shows Images Work"]', {
height: 360,
width: 640
});
});
</script>
</head>
<body>
<p>This example demonstrates how to display a Vimeo video in Shadowbox.</p>
<p>Click Here</p>
<p id="foot">This file is part of Shadowbox.js.</p>
<p><a title="Shows Images Work" href="http://upload.wikimedia.org/wikipedia/en/thumb/d/dd/G2Cloud_eso1151a.jpeg/200px-G2Cloud_eso1151a.jpeg">This shows images work</a></p>
</body>
</html>
Glad it worked, I'll re-word the comment so random visitors would find it helpful as well. :)
Make sure that you build the shadowbox library with the appropriate options otherwise the specific shadowbox mode you want to use works. See: http://shadowbox-js.com/download.html