I'm having a strange issue over at a new site I just created (http://segarsmedia.com/motor-city-rising/). Problem is when you first visit it, you're greeted with a large play button and a poster image from the video I'm presenting coming from YouTube. Click it and a div goes over that spot, along with an close button. So far, so good.
However, if you click the close button and then try to play the video again, the video appears and starts to play, but it now appears underneath the poster image and play button and it's about 1/5 the original size. It seems to now be playing outside of its' intended container although when in inspector, the code doesn't seem to show that. It also doesn't seem to add any additional inline styles as well.
Obviously, I want the video to appear where it first appears when you click on the play button. So why is this occurring instead?
I have a Pen up at http://codepen.io/anon/pen/NdMqya and here's the code.
HTML
<div class="entry-content">
<div id="video-mask"></div>
<a class="vidjmp" id="show" href="#"><div class="play"><img src="http://segarsmedia.com/wp-content/themes/auth-story/img/play.png" alt="play" title="play"></div>
<img width="1920" height="1080" src="http://segarsmedia.com/wp-content/uploads/2017/01/hero-motor-city-rising.jpg" class="attachment-full size-full wp-post-image" alt="Motor City Rising" srcset="http://segarsmedia.com/wp-content/uploads/2017/01/hero-motor-city-rising.jpg 1920w, http://segarsmedia.com/wp-content/uploads/2017/01/hero-motor-city-rising-300x169.jpg 300w, http://segarsmedia.com/wp-content/uploads/2017/01/hero-motor-city-rising-768x432.jpg 768w, http://segarsmedia.com/wp-content/uploads/2017/01/hero-motor-city-rising-1024x576.jpg 1024w" sizes="(max-width: 1920px) 100vw, 1920px" /></a>
<div id="video-content" class="video-content">
<a id="video-close" href="#"><div id="close" class="close">X</div></a>
<div class="video-container">
<iframe id="video-iframe" width="" height="" src="http://www.youtube.com/embed/75pCxGDkuNQ" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div><!-- .entry-content -->
CSS
.entry-content:before,
.entry-content:after {
content: "";
display: table;
table-layout: fixed;
}
.entry-content:after, {
clear: both;
}
.entry-content {
position: relative;
display: block;
margin: 0;
width: 100%;
}
.play {
width: 125px;
height: 125px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -62.5px;
margin-top: -62.5px;
z-index: 205;
}
#video-content {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
.video-container {
position: relative;
padding-bottom:56.25%;
padding-top: 0;
height: 0;
overflow: hidden;
width: 100%;
height: 100%;
}
.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#close {
background: #000;
color: #FFF;
display: block;
position: absolute;
top: 16px;
left: 24px;
height: 48px;
width: 48px;
border-radius: 24px;
z-index: 2000;
font-size: 24px;
line-height: 1;
font-weight: 700;
padding: 14px 16px;
border-radius: 24px;
z-index: 2000;
}
#media screen and (max-width: 677px) {
.play {
width: 62.5px;
height: 62.5px;
margin-left: -31.25px;
margin-top: -31.25px;
}
#close {
height: 30px;
border-radius: 15px;
font-size: 15px;
padding: 7px 10px;
width: 30px;
border-radius: 15px;
}
}
JS
<script type="text/javascript">
jQuery(document).ready(function() {
var iframeSrc = jQuery('#video-iframe').attr("src");
jQuery('a.vidjmp').click(function(e) {
e.preventDefault();
jQuery('#video-iframe').attr("src", iframeSrc + '?rel=0&autoplay=1&showinfo=0&modestbranding=0');
jQuery('#video-mask').fadeTo(500,0.9, function(){
jQuery('#video-content').fadeIn(500, function(){
jQuery('#video-iframe').show();
});
});
});
// Close Modal/Mask
jQuery('#video-close, #video-mask').click(function (e) {
e.preventDefault();
jQuery('#video-iframe').attr("src", iframeSrc);
jQuery('#video-mask, #video-content').fadeOut(0, function(){
var vidCopy = jQuery('#video-iframe').clone();
jQuery('#video-iframe').detach();
jQuery(vidCopy).appendTo('#video-content');
});
});
});
</script>
Found the problem. It was a simple case of CSS:
#video-iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
}
Related
I have a HTML video with a DIV containing custom controls over it.
The play button works fine, but the pause button does not. There are two weird things happening:
The media.pause() method just does not seem to work at all, as if it were not there.
The .addClass() and .removeClass() methods after media.pause() are not working either. But when I put console.log('anything') below it in the code, then it prints to the console. Also, the objects that it is called on are there (I used console.log to check).
// play video
$('.funnel-video-poster').on('click', function() {
var video_id = $(this).data('video-id');
document.getElementById(video_id).play();
$(this).find('.FVP-btn-play').addClass('hidden');
$(this).find('.FVP-btn-pause').removeClass('hidden');
});
// pause video
$('.FVP-btn-pause').on('click', function() {
var $poster = $(this).closest('.funnel-video-poster'),
video_id = $poster.data('video-id');
var media = document.querySelector('#' + video_id);
media.pause();
console.log(media);
$poster.find('.FVP-btn-play').removeClass('hidden');
$poster.find('.FVP-btn-pause').addClass('hidden');
console.log($poster.find('.FVP-btn-play'));
console.log($poster.find('.FVP-btn-pause'));
});
.funnel-block .funnel-video video {
display: block;
margin: 0 auto;
}
.funnel-block .funnel-video .funnel-video-poster {
background-repeat: no-repeat;
position: relative;
z-index: 2;
margin-left: auto;
margin-right: auto;
cursor: pointer;
}
.funnel-block .funnel-video .funnel-video-poster.see-thru {
background: transparent !important;
}
.funnel-block .funnel-video .funnel-video-poster .FVP-btn-play {
width: 3rem;
height: 3rem;
line-height: 3rem;
background: #3c3c3c;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
border-radius: 50%;
}
.funnel-block .funnel-video .funnel-video-poster .FVP-btn-pause {
width: 3rem;
height: 3rem;
line-height: 3rem;
background: #3c3c3c;
color: #fff;
text-align: center;
border-radius: 50%;
position: absolute;
bottom: .25rem;
left: 50%;
transform: translate(-50%, 0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="funnel-block">
<div class="py-5 funnel-video">
<video poster="https://www.tomasbradle.eu/webroot/stored_data/funnel_videos/funnel_block_50_ea8dec6d.png" id="funnel_video_50" equalizer-state="attached" width="640" height="360">
<source src="https://www.tomasbradle.eu/webroot/stored_data/funnel_videos/funnel_block_50_ea8dec6d.mp4">
Your browser does not support HTML 5 video
</video>
<div class="funnel-video-poster see-thru" data-video-id="funnel_video_50" style="width:640px;height:360px;margin-top:-360px">
<div class="FVP-btn-play hidden">Play</div>
<div class="FVP-btn-pause">Pause</div>
</div>
</div>
</div>
Here is the way that I implemented the play and pause functionality in jQuery:
$('.FVP-btn-play').on('click', function() {
$('video').trigger('play');
$('.FVP-btn-play').toggleClass('hidden');
$('.FVP-btn-pause').toggleClass('hidden');
});
$('.FVP-btn-pause').on('click', function() {
$('video').trigger('pause');
$('.FVP-btn-play').toggleClass('hidden');
$('.FVP-btn-pause').toggleClass('hidden');
});
In the HTML, I moved the hidden class from Play to Pause as this is the state of the application to start with.
I did not change the CSS, apart from adding a hidden class, which was not included.
I used jQuery toggleClass() to add and remove the hidden class on the Play and Pause buttons.
Here is a working solution based on your code (best viewed in full screen mode):
$('.FVP-btn-play').on('click', function() {
$('video').trigger('play');
$('.FVP-btn-play').toggleClass('hidden');
$('.FVP-btn-pause').toggleClass('hidden');
});
$('.FVP-btn-pause').on('click', function() {
$('video').trigger('pause');
$('.FVP-btn-play').toggleClass('hidden');
$('.FVP-btn-pause').toggleClass('hidden');
});
.hidden {
visibility: hidden;
}
.funnel-block .funnel-video video {
display: block;
margin: 0 auto;
}
.funnel-block .funnel-video .funnel-video-poster {
background-repeat: no-repeat;
position: relative;
z-index: 2;
margin-left: auto;
margin-right: auto;
cursor: pointer;
}
.funnel-block .funnel-video .funnel-video-poster.see-thru {
background: transparent !important;
}
.funnel-block .funnel-video .funnel-video-poster .FVP-btn-play {
width: 3rem;
height: 3rem;
line-height: 3rem;
background: #3c3c3c;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
border-radius: 50%;
}
.funnel-block .funnel-video .funnel-video-poster .FVP-btn-pause {
width: 3rem;
height: 3rem;
line-height: 3rem;
background: #3c3c3c;
color: #fff;
text-align: center;
border-radius: 50%;
position: absolute;
bottom: .25rem;
left: 50%;
transform: translate(-50%, 0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="funnel-block">
<div class="py-5 funnel-video">
<video poster="https://www.tomasbradle.eu/webroot/stored_data/funnel_videos/funnel_block_50_ea8dec6d.png" id="funnel_video_50" equalizer-state="attached" width="640" height="360">
<source src="https://www.tomasbradle.eu/webroot/stored_data/funnel_videos/funnel_block_50_ea8dec6d.mp4">
Your browser does not support HTML 5 video
</video>
<div class="funnel-video-poster see-thru" data-video-id="funnel_video_50" style="width:640px;height:360px;margin-top:-360px">
<div class="FVP-btn-play">Play</div>
<div class="FVP-btn-pause hidden">Pause</div>
</div>
</div>
</div>
Here is one source of information about jQuery.
Here is a reference to the HTML video element documentation.
Is there any way to resize the picture on the right because the actual GIF is 500x500px and it is only showing 100x100px but at the same time keep the layout design like it is? Any help would be extremely apreciated!
What I have now (Demo w/ code): http://jsfiddle.net/dkfn482L/
body {
margin: 0;
}
.t_container::after {
clear: both;
}
.t_iframe {
position: relative;
float: left;
}
.t_iframe iframe {
width: 100%;
height: 100%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.t_video {
width: 64%;
padding-top: 36%;
}
.t_image {
width: 36%;
padding-top: 36%;
}
#media (max-width: 768px) {
.t_iframe {
float: none;
width: 100%;
}
.t_video {
width: 100%;
padding-top: 36%;
}
.t_image {
width: 100%;
padding-top: 100%;
object-fit: cover;
}
}
<div class="t_container">
<div class="t_iframe t_video">
<iframe frameborder="0" src="https://www.youtube.com/embed/jNQXAC9IVRw"></iframe>
</div>
<div class="t_iframe t_image">
<iframe frameborder="0" scrolling="no" src="https://cdn.shopify.com/s/files/1/0436/5985/3990/files/ezgif.com-video-to-gif.gif?v=1597626410"></iframe>
</div>
</div>
You can give the Iframe 'width' & 'height' attribute and set fixed value.
however, your CSS override the iframe natural width:
.t_image {
width: 36%;
padding-top: 36%;
}
Try to add <img> element to the iframe and give it a minimum values for height and width.
I'm working with a CSS Overlay for an image, trying to get text to display when the image is hovered. I have it working, but for some reason, the text is also all appearing as a blob above the gallery. I think it's to do with the position tag I'm using, but I'm not sure how to reproduce exactly. Code below + CSB:
https://codesandbox.io/s/eager-moore-qeki7
gallery
{
data.map((edge) => (
<div key={edge} className={styles.imgHov}>
<Img
fluid={edge.node.data.one}
className={styles.image}
/>
<div className={styles.overlay} key={edge}>
<p className={styles.text}>{edge.node.data.item_one}</p>
<p className={styles.text}>{edge.node.data.item_two}</p>
</div>
</div>
))
}
css
.imgHov:hover{
position: relative;
}
.image{
width: 25vw;
height: 25vw;
object-fit: cover;
}
.overlay{
position: absolute;
z-index: 999;
margin: 0 0;
left: 0;
right: 0;
top: 40%;
width: 60%;
background-color: pink;
height: 60%;
width: 25vw;
}
.overlay .text{
color: white;
font-family: Geomanist;
}
I translated your app in normal HTML, i think this should meet your requirements :)
.imgHov{
position: relative;
width: 25vw;
height: 25vw;
}
.image{
width: 100%;
height: 100%;
object-fit: cover;
}
.overlay{
display: none;
position: absolute;
z-index: 999;
margin: 0 0;
left: 0;
right: 0;
top: 40%;
width: 60%;
background-color: pink;
height: 60%;
width: 25vw;
}
.overlay .text{
color: white;
font-family: Geomanist;
}
.imgHov:hover .overlay {
display: block;
}
<div class="imgHov">
<img class="image" src="https://static.scientificamerican.com/sciam/cache/file/92E141F8-36E4-4331-BB2EE42AC8674DD3_source.jpg"/>
<div class="overlay">
<p class="text">item one</p>
<p class="text">item two</p>
</div>
</div>
I have a simple popup that plays a movie and have a cross to close the popup and movie.
This works fine once, however if reopened, you cannot close the popup again. We could have multiple videos on here, for some reason the cross button t close is working first, but not if the popup is reopened.
Anyone have any suggestions? It seems as though the cross function is only working once.
$('.video-popup').click(function(e) {
$('.overlay').fadeIn();
$(this).parent('.video-img').find('.video-container, .close-video').fadeIn();
e.stopPropagation();
});
$('.close-video').click(function(f) {
vimeoWrap = $('.video-container');
vimeoWrap.html(vimeoWrap.html());
$('.overlay, .video-container, .close-video').fadeOut();
f.stopPropagation();
});
.video-container {
position: fixed;
z-index: 99;
max-width: 800px;
left: 50%;
top: 50%;
height: 500px;
display: none;
width: 100%;
padding: 0 15px;
}
.overlay {
position: fixed;
height: 100%;
width: 100%;
background: rgba(0, 14, 60, 0.8);
z-index: 9;
display: none;
top: 0;
left: 0;
right: 0;
}
.close-video {
position: absolute;
z-index: 99;
top: -50px;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pdf-video-block">
<div class="video-img">
<img src="https://d1e4pidl3fu268.cloudfront.net/66963e4a-ccba-4fdd-ba18-d5862fb4dba7/test.png" class="video-popup">
<div class="video-container">
<div class="close-video">X</div>
<iframe src="https://player.vimeo.com/video/8733915" width="100%" height="500" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
</div>
</div>
Thanks
You need to change your close function like:
$('body').on('click', '.close-video', function(f) {
//instead of
//$('.close-video').click(function(f) {
Because after you change parent element (like below) you can't access this element anymore.
vimeoWrap = $('.video-container');
vimeoWrap.html(vimeoWrap.html());
It works like this for me:
$('.video-popup').click(function(e) {
$('.overlay').fadeIn();
$('.video-container, .close-video').fadeIn();
e.stopPropagation();
e.stopPropagation();
});
$('.close-video').click(function(f) {
//vimeoWrap = $('.video-container');
//vimeoWrap.html(vimeoWrap.html());
$('.overlay, .video-container, .close-video').fadeOut();
f.stopPropagation();
});
.video-popup {
width: 100px;
height: 100px;
}
.video-container {
position: fixed;
z-index: 99;
max-width: 800px;
left: 50%;
top: 50%;
margin-top: 0;
margin-left: 0;
height: 500px;
display: none;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
width: 100%;
padding: 0 15px;
}
.overlay {
position: fixed;
height: 100%;
width: 100%;
background: rgba(0, 14, 60, 0.8);
z-index: 9;
display: none;
top: 0;
left: 0;
right: 0;
}
.close-video {
position: absolute;
z-index: 99;
top: 100px;
left: 20px;
display: none;
cursor: pointer;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://d1e4pidl3fu268.cloudfront.net/66963e4a-ccba-4fdd-ba18-d5862fb4dba7/test.png" class="video-popup">
<div class="overlay"></div>
<div class="video-container">
<div class="close-video" style="display: block;">X</div>
<iframe src="https://player.vimeo.com/video/317230912" width="100%" height="500" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
Your current click-listener becomes obsolete by vimeoWrap.html(vimeoWrap.html());.
Just put the listener on the parent and it will work even when you reset the html (just changed the first line):
$('.video-container').on("click",".close-video", function(f) {
...
});
So I've made a page intro , in which there are to svg files , one inside which is colored a figure and another out which is only outlined. The figure has an overflow hidden and it has an animation to increase it's width.
Something like this:
<div>
<figure> <img /> </figure> <-- Overflow hidden>
<img /> <-- Only borders
</div>
It looks good on all browsers but IE
And I've been playing with the widths of all the containers but I couldn't make it fit and make it responsive. Any idea ?
(jsFiddle)
$(window).ready(function() {
$('figure').animate({
width: "100vw",
}, 3000, function() {});
});
body {
background-color: red;
margin: 0;
padding: 0;
height: 100vh;
width: 100vw;
}
html {
height: 100vh;
width: 100vw;
padding: 0;
margin: 0;
}
#loading {
height: 100%;
width: 50vw;
}
#loading figure {
position: absolute;
overflow: hidden;
width: 0vw;
margin: 0;
padding: 0;
height: 100%;
}
#loading img {
width: 50vw;
position: absolute;
top: 0;
}
#loading h4 {
text-align: center;
color: #fff;
font-size: 3em;
font-weight: 300;
position: absolute;
top: 25vh;
width: 50vw;
z-index: 2;
}
<body>
<div id="loading">
<figure>
<img src="http://imgh.us/test-color.svg">
</figure>
<img src="http://imgh.us/test_68.svg">
</div>
</body>
Add 100% height on #loading img
#loading img {
height: 100%;
...
}