I'm trying to replicate this: http://wistia.com/blog/fullscreen-video-homepage
on my site, but even working with just the base demo that they give, is running me into issues. If I simply download the sample from that page and open the video, it works fine, but if I do anything as seemingly simple as swapping the background video with the foreground video, it breaks, let alone replacing those videos with my own videos (which is my eventual goal with all of this).
Here's what I'm doing.
Replacing this in the javascript:
overlayVideo: 'fji9juvptr',
overlayVideoDiv: '#wistia_fji9juvptr',
backgroundvideo: 'z1ggfo8f86',
backgroundideoDiv: '#wistia_z1ggfo8f86'
with this:
overlayVideo: 'z1ggfo8f86',
overlayVideoDiv: '#wistia_z1ggfo8f86',
backgroundvideo: 'fji9juvptr',
backgroundideoDiv: '#wistia_fji9juvptr',
and replacing this in the HTML:
<div id="wistia_z1ggfo8f86" class="wistia_embed backgroundVideo" style="width:920px;height:518px;"></div>
<div id="wistia_fji9juvptr" class="wistia_embed overlayVideo" style="width:1920px;height:1080px;"></div>
with this:
<div id="wistia_fji9juvptr" class="wistia_embed backgroundVideo" style="width:920px;height:518px;"></div>
<div id="wistia_z1ggfo8f86" class="wistia_embed overlayVideo" style="width:1920px;height:1080px;"></div>
And that's enough to break it. My guess is that something about the two videos is different that causes the z1ggfo8f86 video to work as the background but not the fji9juvptr video, but I can't tell what that difference is.
I also tried just changing the names of the divs (I changed the "a" in "wistia" to an "o"), but that also broke it so I assume those div names are processed somehow by Wistia.
Any ideas on what I'm missing?
I never wanted an overlay video or buttons or any of that garbage - all I wanted was the background video - I simplified this code so it makes better sense - just change the wistiaVideoID in the javascript object and make sure the id="wistia_q4bmpyxfll" on the DIV in the HTML matches it which is important. Also change the settings for that wistia video on their website so there is no sound, autoplay, and loop...
<!doctype html>
<html lang="en">
<head>
<style>
body {
margin: 0;
padding: 0;
}
#video_container {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
z-index: 1;
opacity: 1;
}
</style>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="video_container">
<div id="wistia_q4bmpyxfll"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script charset='ISO-8859-1' src='https://fast.wistia.com/assets/external/E-v1.js'></script>
<script charset='ISO-8859-1' src='https://fast.wistia.com/labs/crop-fill/plugin.js'></script>
<script type="text/javascript">
var fullScreenVideo = {
wistiaVideoID: 'q4bmpyxfll',
embedVideo: function(){
var videoOptions = {};
Wistia.obj.merge(videoOptions, {plugin: {cropFill: {src: "//fast.wistia.com/labs/crop-fill/plugin.js"}}});
wistiaEmbed = Wistia.embed(this.wistiaVideoID, videoOptions);
},
fixTextPosition: function(){
var width = $(window).width();
var height = $(window).height();
$("#video_container").css("width", width).css("height", height);
}
};
$(document).ready(function() {
fullScreenVideo.fixTextPosition();
});
$(window).resize(fullScreenVideo.fixTextPosition);
fullScreenVideo.embedVideo();
</script>
</body>
</html>
Are your videos the same aspect ratio as the ones in the Tutorial?
To double check, in Wistia, follow these steps on the video content page where you found your video ID.
Video Actions > Embed & Share >
Choose any of the embed options and inspect the code for "height" and "" values, and update your style values for #backgroundVideo and #overlayVideo
I ended up figuring this out.
Of the two videos they use in the Tutorial, the Background one had configured (in Wistia) auto-play and loop, whereas the overlay video (for good reason) did not. Swapping them thus broke auto-play, and since the background video has no way to make it play, it'd just appear to not work at all (and the overlay video would auto-play when the page was loaded, so you'd hear it in the background despite no video being visible.
The solution is to either edit the video in Wistia's configuration properties to have the background one load and the foreground one not, or use the Embed API to set the settings in the JavaScript itself so you don't have to worry about what the video's default settings are.
Related
I'm writing a live video website, which use a third-party tools to play the video.
To simplify my problem, I embedded all the live video components into a single HTML page. It looks like this.
<iframe data-v-140cfad2="" width="800" height="500" src="/backend/render/live?uid=047a911d83&vid=254084" id="haha"></iframe>
When the page was loaded, it played video normally. However, I write following commands in Chrome console.
a = document.getElementById('haha')
a.hidden = true;//or a.style.display = 'none'
Not only the video window disappeared (as I wish), the audio disappeared (that is not I want). I don't know how It stopped, and if there is any way can still run the video in the background.
Update :
Change the size of iframe into 0px * 0px is a way to move the iframe into background. However it does not fit my situation.
I was using vue.js & element-ui. The iframe was inside a el-tabs components, which means all the hidden operations was automatically done after the tab change. I don't know how to prevent such default operation.
Backend iframe code :
(() => {
window.onload = function() {
let ctx = document.getElementById('player');
let uid = ctx.getAttribute('uid');
let vid = ctx.getAttribute('vid');
let cfg = {
uid: uid,
vid: vid,
height: 500,
width: 800,
};
console.log(">>>",cfg);
player = polyvObject('#player').
livePlayer(cfg);
}
})();
<!DOCTYPE html>
<html>
<head>
<script src="http://player.polyv.net/script/player.js"></script>
<script src="http://player.polyv.net/livescript/liveplayer.js"></script>
<script src="/backend/js/live.js"></script>
<link rel="stylesheet" href="/backend/css/live.css">
</head>
<body>
<div id="player" uid="#{uid}" vid="#{vid}"></div>
</body>
</html>
This bug will not happen when iframe embed a MP4 file, or a normal web page. Only happens on my own page. (that strange, because I don't understand how the functions INSIDE the iframe was trigger by the hidden style OUTSIDE iframe).
I solve this problem by modifying the element-ui components to avoid using v-show when hiding components. Details show in the solution posted by myself.
Thanks for all people answering my problem :)
Hide the iFrame
.hiddeniFrame{
width:0px;
height:0px;
}
Or move it away off the screen
At last, I solve my own problem by an ugly approach.
The iframe works fine when style visibility='hidden' was set. So I just rewrite the el-tab-pane in the element-ui.
The initial version of el-tab-pane was:
<template>
<div
class="el-tab-pane"
v-if="(!lazy || loaded) || active"
v-show="active"
role="tabpanel"
:aria-hidden="!active"
:id="`pane-${paneName}`"
:aria-labelledby="`tab-${paneName}`"
>
<slot></slot>
</div>
</template>
A did a little modification as follow (the v-visible was contained by npm vue-visible package) [TabPane]
<template>
<div
class="el-tab-pane"
v-if="(!lazy || loaded) || active"
v-show="active || fly"
v-visible="active || !fly"
role="tabpanel"
:aria-hidden="!active"
:id="`pane-${paneName}`"
:aria-labelledby="`tab-${paneName}`"
>
<slot></slot>
</div>
</template>
In my own code, I replaced the el-tab-pane to my DIY TabPane, adding a props named fly to indicate whether to use v-show or the v-visible to hide the components.
It should be backend issue, so it will be great to update question with iframe content. I've reproduce your situation audio still playing after hiding iframe
setTimeout(() => { document.getElementById('test').hidden = true; }, 10000 )
<iframe src="https://www.instagram.com/p/Bn5ar2uBd2C/embed/" width="640" height="880" id="test"></iframe>
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 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
Is there a good article or how can have an iframe or frame work asynchronously with every page? I have a bottom/fixed div wrapped in jquery to slide up on hover containing an mp3 player. I referenced the player with an iframe. I renderes fine, but how can it keep playing without a reload on page refresh or navigation to another page? I want it to be fixed at the bottom of every page and play continuously without refresh. I tried putting the iframe in each page, but that still didn't work. Any ideas? Thank you.
If it must stay in the browser ( not downloading an application or read stream in a music/video player ), the only way should be to don't really change page, and load content that must change with ajax or javascript ( or have it itself in a (i)frame ).
But it would be a lot easier to do a page with only the lector and put a link on your website to open it in another tab :
Text or what you want
Edit :
So with javascript it would be the same result than ajax, but that means not changing page so for the SEO if it's somewhat important it's not good.
What I meant by javascript was for example if you click on link "home" just adding dynamically a <script type="text/javascript" src="/homepage.js"></script> wich modify content of the page ( while keeping the mp3 player ).
Otherway, maybe with a cookie if it's possible with the player to know by javascript :
at know to wich mp3 file the player is
at wich time in the mp3 playing the player is
to go at a specified mp3 file
to go at a specified time in an mp3
(and if it is possible to pause the player, there should to be the ability to know if the player is playing or not )
It would be possible when changing page to get at the good time ( but there will be the time to load the page and mp3 player without music ).
Or there could be mp3 player which can save a the time at wich we are, and begin at this time on another page ( but still while changing page no sound for several seconds ).
With these methods there would be too the issue of opening several pages.
Edit :
I tried the way with the content of the page in iframe, it works rather well but needs the membre to switch in the mp3 mode.
Here is mp3.html ( to put in root folder, if it's not possible it would need some changes ) :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MP3 Player</title>
<style type="text/css">
html {
font-size: 100%;
}
body {
margin: 0;
padding: 0em;
}
#frame { width: 100%; height: 100%; border: none; }
#player { position: absolute; right: 20px; bottom: 20px; }
</style>
<script type="text/javascript">
if ("onhashchange" in window) {
var h='';
var command= false;
window.onhashchange = function(){
if(location.hash==h) return;
command= true;
window.frames['frame'].location.replace(location.hash.replace(/^#/,""));
h= window.location.hash;
}
}
</script>
</head>
<body>
<iframe id="frame" onLoad="if(this.src=='')return;if(command)command=!1;else window.location.replace(h='#'+window.frames['frame'].location.href.replace(new RegExp('^'+document.location.origin),''));document.title=window.frames['frame'].document.title;"></iframe>
<script type="text/javascript">
document.getElementById("frame").src=document.location.hash.replace(/^#/,"");
</script>
<div id="player">
<object type="application/x-shockwave-flash" data="http://s301826463.onlinehome.fr/so/dewplayer.swf?mp3=http://s301826463.onlinehome.fr/so/Tokyo.mp3" width="200" height="20" id="dewplayer"><param name="wmode" value="transparent"><param name="movie" value="http://s301826463.onlinehome.fr/so/dewplayer.swf?mp3=http://s301826463.onlinehome.fr/so/Tokyo.mp3"></object>
remove mp3 player
</div>
</body>
</html>
And to put a link that open the current page in an iframe and with an mp3 player, it only needs a link :
add mp3 player
An example using that here.
Either you have an independent Flash/Java/Unity etc player outside the browser window.
Or, You use frames, two frames, one where the main site pages appear, and one where the player resides.
Other way is making the entire navigation in your site (where you want the player to be continuous) using async calls (Ajax).
Google b.t.w uses iframes/frames