I have created a tile(metro ui css) and the tile does following:
On click a video is played.
The slide right effect is not displayed(on click).
I cannot remove the zoom effect of the tile.I have tried removing tile class,but it is not working.Please help me to remove the zooming effect after the tile is clicked.Here is the code.
HTML
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="tile" id="vii">
<div class="tile-content slide-right" >
<div class="slide slide1">
<video id="myvideo" controls muted>
<source src="1.mp4" type="video/mp4" />
</video>
</div>
<div class="slide-over slide-over1" id="viii">
Attack by Smit
</div>
</div>
</div>
</div>
</div>
</div>
JavaScript
var myvideo = document.getElementById("myvideo");
var myaudio = document.getElementById("myaudio");
document.getElementById("vii").onclick=function(){
myvideo.play();
myvideo.style.display="block";
myvideo.style.width="600px";
myvideo.style.height="300px";
document.getElementById("viii").style.display="none";
}
Here is code snippet:
http://jsbin.com/tujakasuci/1/edit?html,output
Thank You!!
You should OnClick, remove slide-right Class. The zoom effect come from this class:
document.getElementById("vii").onclick=function(){
$('.tile-content').removeClass("slide-right");
myvideo.play();
myvideo.style.display="block";
myvideo.style.width="600px";
myvideo.style.height="300px";
document.getElementById("viii").style.display="none";
}
Related
thank you so much for taking time to look in to this issue .
I have a page where it contains multiple videos from youtube , i want to replace that video content with the image whenever the user scrolls down beyond that div , it is working fine for one video but when there is multiple videos it is taking the image of last video for all the videos .
Here is my initial html :
<p>this is first paragraph</p>
<div class="main-paragraph">
<div class="video-content">
<img src="/sites/default/files/image1.jpg" alt="">
<button class="video-play"></button>
</div>
</div>
<p>this is second paragraph</p>
<div class="main-content">
<div class="video-content">
<img src="/sites/default/files/image2.jpg" alt="">
<button class="video-play"></button>
</div>
</div>
Let's say for example if user plays the video 1 the html becomes like this :
<p>this is first paragraph</p>
<div class="main-paragraph">
<div class="video-content">
<iframe width="854" height="480" frameborder="0" allowfullscreen="allowfullscreen" title="Video Player" class="video-player" src="https://www.youtube.com/embed/s6OusrTxwxA?autoplay=1&start=0&rel=0&enablejsapi=1" data-gtm-yt-inspected-1927822_387="true" id="427043625">
</div>
</div>
<p>this is second paragraph</p>
<div class="main-content">
<div class="video-content">
<iframe width="854" height="480" frameborder="0" allowfullscreen="allowfullscreen" title="Video Player" class="video-player" src="https://www.youtube.com/embed/DKpkL3ZyLBo?autoplay=1&start=0&rel=0&enablejsapi=1" data-gtm-yt-inspected-1927822_387="true" id="427043625">
</div>
</div>
So if users scroll's down while playing the video , i want replace that video with the image for that specific div similar to like this :
<p>this is first paragraph</p>
<div class="main-paragraph">
<div class="video-content">
<img src="/sites/default/files/image1.jpg" alt="">
<button class="video-play"></button>
</div>
</div>
<p>this is second paragraph</p>
<div class="main-content">
<div class="video-content">
<iframe width="854" height="480" frameborder="0" allowfullscreen="allowfullscreen" title="Video Player" class="video-player" src="https://www.youtube.com/embed/DKpkL3ZyLBo?autoplay=1&start=0&rel=0&enablejsapi=1" data-gtm-yt-inspected-1927822_387="true" id="427043625">
</div>
</div>
Here is my jquery :
$(document).ready(function() {
$('.main-paragraph').each(function() {
let old_html = $(this).find('.video-content').html();
// Stop playing the video and show image when scrolled past.
$(window).scroll(function() {
$('.video-content').each(function() {
let windowScroll = $(window).scrollTop(); // how many pixels you've scrolled
let containerDistance = $(this).offset().top;
let containerHeight = $(this).height(); // height of container in pixel
// If you've scrolled further than the top of the container + it's height
// stop the video.
if (windowScroll > containerDistance + containerHeight) {
$(this).html(old_html);
}
});
});
});
In order to make video play when someone clicks on the play button, the button must become the pause icon to show that you can play and pause. Right now, the video does not play when I click on the play button. There is an error message that says playPause is not defined.
ERROR
1(index):131 Uncaught ReferenceError: playPause is not defined at HTMLButtonElement.onclick
HTML JS
jQuery(document).ready(function($){
var ppbutton = document.getElementById("vidbutton");
ppbutton.addEventListener("click", playPause);
myVideo = document.getElementById("video1");
function playPause() {
if (myVideo.paused) {
myVideo.play();
ppbutton.innerHTML = "Pause";
}
else {
myVideo.pause();
ppbutton.innerHTML = "Play";
}
}
});
<div class="hero">
<div class="container">
<div class="wrapper">
<div class="row">
<div class="video">
<video height="369px" width="610px" muted id="video1" poster="assets/img/photo.jpg">
<source src="/assets/video/bjp__video.mp4" type="video/mp4">
<source src="/assets/video/bjp__video.webm" type="video/webm">
</video>
<div class="name">
<img alt="name" src="assets/img/bjp_title.png">
</div>
</div>
<div class="info__hero__content">
<p>I help <span><b>people with disabilities</b></span> and <span><b>entrepreneurs</b></span> to find their hide abilities and resources for their businesses.</p>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="play__btn">
<button id="vidbutton" onclick="playPause()">
<img alt="play button" src="/assets/img/play__button.svg">
</button>
</div>
<div class="line"></div>
</div>
Try removing the onclick event from the button itself. That is what is causing the error.
jQuery(document).ready(function($){
var ppbutton = document.getElementById("vidbutton");
ppbutton.addEventListener("click", playPause);
myVideo = document.getElementById("video1");
function playPause() {
if (myVideo.paused) {
myVideo.play();
ppbutton.innerHTML = "Pause";
}
else {
myVideo.pause();
ppbutton.innerHTML = "Play";
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hero">
<div class="container">
<div class="wrapper">
<div class="row">
<div class="video">
<video height="169px" width="410px" id="video1" poster="https://ourtube.co.uk/upload/photos/2021/11/928b8656defe100bf7c75815db0edf992b1e33d2wK9QTHR7ny9ahCHqPYKf.video_thumb_5245_11.jpeg">
<source src="https://ourtube.co.uk/watch/TMaamxje77GKe9q" type="video/mp4">
</video>
<div class="name">
<img alt="name" src="assets/img/bjp_title.png">
</div>
</div>
<div class="info__hero__content">
<p>I help <span><b>people with disabilities</b></span> and <span><b>entrepreneurs</b></span> to find their hide abilities and resources for their businesses.</p>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="play__btn">
<button id="vidbutton">
<img alt="play button" src="https://brandnewtube.com/themes/youplay/img/icon.png"> Play
</button>
</div>
<div class="line"></div>
</div>
I have a page setup with links that hide/show divs. The last link is a contact form. Contact forms are super messy with code so I wanted to load the file externally
I found many snippets on simply loading html into div with jquery. But the issue is I already have jquery setup to show and hide the divs
How can I have the contact link show the contact div and also load the external contact form into it?
$(document).ready(function () {
$('.menu').click(function () {
var $clicked = $(this)
$('.menu').each(function(){
var $menu = $(this);
if (!$menu.is($clicked))
{
$($menu.attr('data-item')).hide();
}
});
$($clicked.attr('data-item')).toggle();
});
$(".contactmenu").click(function(){
$("#menu-contact").load("contactform.htm");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<header>
<div align="center" class="logoclass" id="logo"><img src="media/logo.png"/></div>
<div id="topmenu">
Home
Videos
Follow
Contact
</div>
</header>
<article>
<div id="bodycontent">
<div id="menu-contact" style="display: none">Contact</div>
<div id="menu-follow" style="display: none">Follow</div>
<div id="menu-videos" style="display: none"><br />
<div id="videos" style="z-index:1" onClick="document.getElementById('sitemusic').pause();"><br />
<div align="center" id="videobox">Splash
<video style="z-index:-1;" width="400" controls>
<source src="media/videos/splash.mp4" type="video/mp4">
<source src="media/videos/splash.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
</div>
</div>
<div id="menu-home" style="display: none">..</div>
</div>
</article>
contactmenu class doesn't exist, try:
$("#contact-menu-item").click(function(){
I wrote this to find a video element within an owl-carousel slide and then set owl-carousel control's CSS only (this control appears on runtime of webpage) for that specific slide.
The code is not working at all, I'm new to use js.
$(".item").children().find("video").each(function(){
var d = document.getElementByClass('owl-controls');
d.style.bottom = y_pos+'10px';
});
For the HTML
<div id="post-media" class="owl-carousel item-2">
<div class="item"><img src="images/fullimage1.jpg" alt="The Last of us"></div>
<div class="item">
<video controls="" class="embed-responsive-item" style="width:100%; height:100%">
<source src="video/clip1.mp4" type="video/mp4">
</video>
</div>
<div class="owl-controls clickable">
<div class="owl-pagination">
<div class="owl-page active">
<span class=""></span>
</div>
<div class="owl-page">
<span class=""></span>
</div>
</div>
</div>
</div>
If you only desire shifting the position of owl-controls no need for jquery. You can use CSS only:
.owl-carousel .owl-controls
{
margin-top:10px;
}
If you know css3, you can use same queries with jQuery
$(".item video").each(function(){
var d = document.getElementByClass('owl-controls');
d.style.bottom = y_pos+'10px';
});
I have two bootsrap div rows. The first row contains a HTML5 video tag where I want to play video.
The second row contains JQuery Slider showing images that corresponds to the videos that need to be played by their index. The slider is using a https://github.com/kenwheeler/slick/ plugin.
If image in position 1 is clicked, I want to play video_1 in the player, and so on.
The URL of video will be in this format <source src="videos/video_1.mp4"
Here is my markup
<body style="background-color: #0094ff">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<video width="640" height="360" controls id="player">
<source src="videos\video_1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<div class="row">
<div class="col-md-12 slider">
<div class="col-md-5 col-xs-3"><img id="image_1" src="images\guest1.jpg" alt="Image I"/></div>
<div class="col-md-5 col-xs-3"><img id="image_1" src="images\guest2.jpg" alt="Image 2"/></div>
<div class="col-md-5 col-xs-3"><img id="image_1" src="images\guest3.jpg" alt="Image 3"/></div>
<div class="col-md-5 col-xs-3"><img id="image_1" src="images\guest4.jpg" alt="Image 4"/></div>
<div class="col-md-5 col-xs-3"><img id="image_1" src="images\guest5.jpg" alt="Image 5"/></div>
<div class="col-md-5 col-xs-3"><img id="image_1" src="images\guest6.jpg" alt="Image 6"/></div>
</div>
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.slider').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
})
$('.slider').on('click', '.slick-slide', function () {
alert("Slide clicked");
//how can I show the video with the position of the clicked slide?
})
</script>
</body>
How can I show an a video using the position/index of the clicked slide to create the src="" of the video tag with the id of "player"?
UPDATE
Here is a screenshot of what the screen looks like currently, an I want to show a different video when each of the image is clicked.
To answer your question exactly do this:
$('.slider').on('click', '.slick-slide', function () {
var index = $('.slider').slick('slickCurrentSlide');
$('#player source').attr('src', 'videos/video_'+index+'.mp4');
})
But better control would be:
Add a data-video to each img tag:
<div class="col-md-5 col-xs-3">
<img id="image_1" src="images\guest1.jpg" data-video="videos\video_1.mp4" alt="Image I" />
</div>
You can then swap out the video like so:
$('.slider').on('click', 'img', function () {
var data = $(this).data(); // Grab data from IMG
$('#player source').attr('src', data.video);
})