I am trying to create a button on an app I'm working on that launches a GIF recording when I click the button. I'm not familiar with how GIFs are made or what resources I would need to create this. Are there any languages/tools I would need to know to do this?
This is a function that plays the gif on click of a button or on click of the still image.
number = 0;
var animations = ['https://media.giphy.com/media/sCPGYa9EAeTFC/giphy.gif',
'https://media.giphy.com/media/sCPGYa9EAeTFC/giphy.gif',
'https://media.giphy.com/media/sCPGYa9EAeTFC/giphy.gif'
]; // array of gif
//function to play gif
function playGif() {
image = document.getElementById('hiddenimageid');
image.src = animations[number];
}
.gifButton {
position: absolute;
top: 10%;
left: 25%;
}
.board {
position: absolute;
top: 20%;
left: 10%;
width: 50%;
height: 50%;
cursor: pointer;
}
.board img {
width: 100%;
height: 100%;
}
<body>
<button class="gifButton" onclick="playGif()">Click to play Gif</button>
<div class="board">
<img src="https://im7.ezgif.com/tmp/ffffff-ezgif-7-0ed398c8bb8a-gif-jpg/frame_07_delay-0.13s.jpg" id="hiddenimageid" onclick="character();" />
</div>
</body>
<!--The img src here is the still image to display before the gif starts running-->
Or if you are trying to just display the Gif from a link you could put it in an iframe
iframe {
position: absolute;
left: 20%;
width: 40%;
height 40%;
}
<iframe src="https://giphy.com/embed/eoxomXXVL2S0E" width="480" height="360" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
<p>via GIPHY</p>
Related
for sure it is easy when the video is not fullscreen.
here the structure
.boiteVideo iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#affiche{
z-index: 2147483647;
position: absolute;
left:200px;
top: 200px;
}
<div class="embed-responsive embed-responsive-16by9 boiteVideo">
<iframe id="player1" src="xxxxx" allowfullscreen=""></iframe>
<div id="affiche" class="text-success well"><h1>Un test overlay</h1></div>
</div>
I use Vimeo video and pyayer.js to show the quiz at good moment during the video
Everything work well the #affiche is over the video but in fullscreen nothing to do.
When I look the structure of Vimeo in fullscreen I see a class player, vp-video-wrapper, vp-video, vp-player-ui-overlays.
Someone have an idea it will be very appreciate
thanks
i try every class like player,vp-video-wrapper,vp-video,vp-player-ui-overlays
i can see in fullscreen to show the <div id="affiche" and nothing work.
also i try to include this div in the iframe like this
$("#affiche").appendTo($("iframe"));
$("#btnFullScreen").click(function() {
var element = document.querySelector(".boiteVideo");
element.requestFullscreen();
});
.boiteVideo iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#affiche {
z-index: 2147483647;
position: absolute;
left:200px;
top: 200px;
}
<button id="btnFullScreen">Open Video in Fullscreen Mode</button>
<div class="embed-responsive embed-responsive-16by9 boiteVideo">
<iframe id="player1" src="xxxxx"></iframe>
<div id="affiche" class="text-success well">
<h1>Un test overlay</h1>
</div>
</div>
I'm trying to place a small video behind a banner-like div element. After some time researching I managed to at least show the contents of the div, but the video is nowhere to be seen. If I place them separately both show up, but if I try to stack them on top of each other it disappears.
HTML:
<div id="castle-siege">
<div id="cs-video">
<video id="videocs" width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto">
<source src=/assets/img/cs.mp4" type="video/mp4">
</video>
</div>
<div id="cs-table">
//content
</div>
</div>
CSS:
#castle-siege {
width: 1000px;
height: 150px;
text-align: center;
position: relative;
overflow: hidden;
}
#cs-video {
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 5;
}
#cs-table {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: 10;
}
I think in this instance, that you need to set position attribute as well as z index in order to display the video properly. Also ensure your video is present and correct at the set url of course! Set the position of the video to absolute and set the table relative to it, either with a higher or lower z-index, as necessary (higher if you want it to be seen on top of the video)
For purposes of demo, I set the width to 80%, it's prob better to use percentages/ an adjustable unit, rather than setting the width in px.
Hope this helps
#castle-siege {
width: 80%;
height: 150px;
text-align: center;
position: relative;
overflow: hidden;
}
#cs-video {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index:0;
}
#cs-table {
width: 100%;
height: 100%;
margin-top: 30px;
margin-left: 50px;
color:red;
text-align:left;
position: relative;
z-index:1;
}
<div id="castle-siege">
<div id="cs-video">
<video id="videocs" width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto">
<source src="http://mirrors.standaloneinstaller.com/video-sample/jellyfish-25-mbps-hd-hevc.mp4">
</video>
</div>
<div id="cs-table">
Hi there, how's it going? There's supposed to be a table here.
</div>
</div>
To begin with - I'm CSS / HTML beginner so something that might be obvious for you - for me is just not :) Would really appreciate your help.
I'm having a problem regarding positioning of the text on responsive YouTube embed.
What I'm trying to accomplish is:
responsive Youtube video that scales well for all resolutions - it works well
text should be placed on top of the Youtube embed - right now it disappears in back
text should be position in the same place in relation to video embed (for all the resolutions) - in my final example text should be placed on right, approx 25% up from the bottom end of the Youtube embed
I want to have access to Youtube embed controls (e.g. pausing on click and so on) so any layer covering youtube embed won't be OK
I would prefer a solution of html/css (without any additional js)
Source that I have is the following:
.video-container {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 0px;
/* size of chrome */
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="video-container">
<iframe src="https://www.youtube.com/embed/AqG147-XEWg?wmode=opaque&autoplay=1&loop=1&showinfo=0" frameborder="0"></iframe>
<div class="text">
<h1>
Example text
</h1>
</div>
</div>
If some of you guys would be able to help with text positioning, I'd really appreciate
Your attempt is super close. We just need to position the .text element absolutely and use some right and bottom properties to align it. In the example below I've used:
.text {
position: absolute;
color: white;
right: 5%;
bottom: 25%;
}
I've also changed the .text color to white so it's visible, but this could be changed depending on the colors in the video.
.video-container {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 0px;
/* size of chrome */
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.text {
position: absolute;
color: white;
right: 5%;
bottom: 25%;
}
<div class="video-container">
<iframe src="https://www.youtube.com/embed/AqG147-XEWg?wmode=opaque&autoplay=1&loop=1&showinfo=0" frameborder="0"></iframe>
<div class="text">
<h1>
Example text
</h1>
</div>
</div>
Hi I built a responsive theme to embed vimeo videos.
Here is my CSS:
.vimeo-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
height: auto;
}
.vimeo-container iframe,
.vimeo-container object,
.vimeo-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
And here is my html:
<div class="vimeo-container">
<!-- video iframe goes here -->
</div>
It works well and is responsive. Now I want to keep this responsiveness but make this video look like a background, so I thought of adding an overlay with text on top of it. Something like what is done on this Site.
How to keep the responsiveness and add an overlay with text to make it similar to the mentioned site above?
For the overlay, you can add an absolutelty postionned DIV inside your container. I changed your CSS a bit to make it more fullscreen-like and more responsive by giving a Fixed position to the vimeo-container, because I saw that there was padding at the bottom and we could see the white background of the body.
JSFIDDLE EXAMPLE
HTML:
<div class="vimeo-container">
<div class="overlay">
<div class="text-container">
<h1>Hello World!</h1>
</div>
</div>
<iframe src="https://player.vimeo.com/video/34905657?color=0fb0d4&title=0&byline=0&portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p>Cowboy's Cat from Animade on Vimeo.</p>
</div>
CSS:
.vimeo-container {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
max-width: 100%;
}
.vimeo-container .overlay{
position: absolute;
width: 100%;
height:100%;
background:#000;
opacity:0.5;
z-index:999;
}
.vimeo-container .overlay .text-container{
width:100%;
text-align:center;
}
.vimeo-container .overlay .text-container h1{
color:#FFF;
text-transform:uppercase;
}
.vimeo-container iframe,
.vimeo-container object,
.vimeo-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Since your video container already have position: relative, you can set position:absolute for you layer over video:
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
Here is a working fiddle exampple with your code: https://jsfiddle.net/Munja/d8w4o31k/
Also, you can take a look on this fiddle example with video playing in bg: https://jsfiddle.net/Munja/dpfzhw1v/ I used exactly this thing on one website I was working on some time ago.
I'm looking put put some text over google drive embedded player (using iframe)
CSS & HTML:
#over {
position: absolute;
top: 0px;
left: 0px;
background-color: #FF0000;
height: 30px;
}
<div>
<div id="over">This is Preview</div>
<iframe src="https://docs.google.com/file/d/0B5GSymfNadlIV1NJRFpITWJLNHc/preview" width="640" height="480"></iframe>
</div>
But the text is not overlaying the video player on my site. I'm working on wordpress mh-joylite theme. Please suggest me, point my mistakes.
Wrap your video iframe and floating text and make the parent position: relative, like so:
.video {
position: relative;
display: inline-block;
/* ie7 inline-block support */
*display: inline;
*zoom: 1;
}
#over {
position: absolute;
top: 0px;
left: 0px;
background-color: #ff0000;
}
<div class="video">
<div id="over">This is Preview</div>
<iframe src="https://docs.google.com/file/d/0B5GSymfNadlIV1NJRFpITWJLNHc/preview" width="640" height="480"></iframe>
</div>