I am trying to work on a webpage in which when I click on the image tag I should be able to show the hidden video. I used handlebars. I also want to close this video when some user clicks on some other photo.
<script type = "text/x-handlebars-template" id = "template">
<div class = "row row-eq-height">
{{#each images}}
<div class = " col-xs-12 col-md-3">
<div class = "thumbnail">
<img src = "{{src}}" style = "width : 50%;height :25%;"
onClick = document.getElementById("video").style.display = "block";/>
<iframe style = "display:none;" id = "video" src = "{{video}}"/>
<h3>{{Song}}</h3>
</div>
</div>
{{/each}}
</div>
</script>
This is not working the videos are hidden but they fail to display back when I press on a photo.
Please do feel free to ask questions incase you need more clarity what my query is.
Any help is greatly appreciated. Thanks in advance.
To achieve a better performance, I suggest you just create everything but iframe. When someone click video thumbnail, create iframe in the fly and append to parent. If you do so, you won't have to hide videos and trying to display them.
<div class="video-container" data-video="{{video}}">
<div class="video-overlay" onclick="fetchVideo()">
<img src = "{{src}}" class="video-thumbnail"/>
<h3>{{Song}}</h3>
</div>
<div class="video-player"></div>
</div>
.video-player {
// this is iframe container
}
.video-overlay {
// syles
transition: opacity 0.3s ease-out;
}
.video-thumbnail {
width : 50%;
height: 25%;
object-fit: cover;
}
.hidden {
opacity: 0;
}
function fetchVideo() {
let parent = event.target.parentElement;
let video = parent.dataset.video;
let iframe = `<iframe width="560" height="315" src="${video}" frameborder="0" allowfullscreen allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>`;
let player = event.target.nextElementSibling;
player.insertAdjacentHTML('beforeend', iframe);
event.target.classList.add("hidden");
}
Related
On my site [ now at : http://gatecybertech.com/test but will be moved to main site later : http://gatecybertech.com ] you can click on the top right "Video" link to get to the videos section, after I played a few clips and closed the iFrame, if I click on the "Back" button on browser, the last video will be played again, but the strange thing is : I can hear the sound, but can't see the video ? So how to solve the problem by achieving one of the following :
[1] Show the video again in iFrame and play it normally
or
[2] Don't play the sound & don't show the video
Either of the above will do. How can I achieve that ?
My html looks like this :
<div class="tools-icon">
<img src=https://i.ytimg.com/vi/IgBIaZgoAQc/hqdefault.jpg?sqp=-oaymwEXCPYBEIoBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLDW3KcjXsTR5utmlvhFfibLe-bvRg width=170 height=110>
<p class="tools-icon__text">Keypad Pins Easily Stolen</p>
</div>
...
<!-- the modal div that will open when an anchor link is clicked to show the related video in an iframe. -->
<div id="modal" tabindex="-1">
<div class="content">
<h4 class="title"></h4>
<iframe class="yt-video" src="https://www.youtube.com/embed/A1nRiiWYgZw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div class="black_overlay" onclick="closeLightBox()" style="display: block;">
<div style=" z-index: 0; left: 76%; top: 17%; width: 22px; position: absolute;">
<a class="close" onclick = "return close_iFrame();"><h2>×</h2></a>
</div>
</div>
</div>
Script looks like this :
<script>
var modal = document.getElementById('modal'),
closeBtn = modal.querySelector('close'),
ytVideo = modal.querySelector('.content .yt-video'),
title = modal.querySelector('.content .title'),
anchors = document.querySelectorAll('a[data-target="modal"]'),
l = anchors.length;
for (var i = 0; i < l; i++)
{
anchors[i].addEventListener("click", function(e)
{
e.preventDefault();
title.textContent = this.dataset.videoTitle || 'No title';
ytVideo.src = this.href;
modal.classList.toggle('is-visible');
modal.focus();
});
}
modal.addEventListener("keydown", function(e)
{
if (e.keyCode == 27)
{
title.textContent = '';
ytVideo.src = '';
this.classList.toggle('is-visible');
}
});
</script>
<script language="javascript" type="text/javascript">
function close_iFrame()
{
var modal = document.getElementById('modal'),
ytVideo = modal.querySelector('.content .yt-video');
ytVideo.src = '';
modal.classList.toggle('is-visible');
}
</script>
OK, I figured it out, just make the following change :
<script language="javascript" type="text/javascript">
function close_iFrame()
{
var modal = document.getElementById('modal'),
ytVideo = modal.querySelector('.content .yt-video');
ytVideo.src = '';
modal.classList.toggle('is-visible');
history.go(-1);
window.location.href = '#Videos';
}
</script>
I have designed a page containing my youtube videos. When you click on the title, embedded videos change on the right division. But the problem is url, I want users to share the video they want. If they press back button they can go back to previous video. I know we can have all these by html 5 history api, but I am new to this and after all my efforts I am not able to solve these problems. Please help.
Following is the code:
Youtube Videos Page
<style type="text/css">
body{
margin: 0px;
}
#leftdiv{
background-color: #A9F5D0;
float: left;
height:100%;
width: 30%;
}
#rightdiv{
background-color: #F8E0F1;
float: left;
height: 100%;
width: 70%;
}
#lectname{
padding:10px;
font-family: "comic sans ms";
}
</style>
<div id="container">
<div id="leftdiv">
<div id="lectname">
<p id="lectname1">Lec 01: What is Signal?</p>
<p id="lectname2">Lec 02: What is an Analog Signal?</p>
<p id="lectname3">Lec 03: What is Digital Signal?</p>
<p id="lectname4">Lec 04: Need of Digital Signal</p>
<p id="lectname5">Lec 05: Introduction to Digital Electronics</p>
<p id="lectname6">Lec 06: Switch and Bits Intuition</p>
</div>
</div>
<div id="rightdiv">
<iframe width="480" height="270" src="https://www.youtube.com/embed/M0mx8S05v60" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<script type="text/javascript">
var lectureVideos = {
lectname1: "https://www.youtube.com/embed/M0mx8S05v60",
lectname2: "https://www.youtube.com/embed/F5h3z8p9dPg",
lectname3: "https://www.youtube.com/embed/jRL9ag3riJY",
lectname4: "https://www.youtube.com/embed/izBaDRyqnBk",
lectname5: "https://www.youtube.com/embed/2xXErGeeb_Q",
lectname6: "https://www.youtube.com/embed/RF9I6UzI4Rc"
}
var videoLinks = document.getElementsByClassName("videoLink");
for(var i=0; i<videoLinks.length; i++){
videoLinks[i].onclick=function(){
document.getElementById("videoFrame").src=lectureVideos[this.id];
}
}
</script>
You're correct that you should be using history API. Reading the docs here will help.
The basic idea is when one of your links is clicked, you should only call history.popState.
Then you setup a window.onpopstate function to handle the video change. This way, no matter if a user clicks the link, back, or forward button, the video change function will be called.
Here is demo code (although the url change doesn't work properly in jsfiddle because its in an iframe)
And here is a working example.
// when a video link is clicked, change the URL
var onVideoLinkClick = function(e){
// did we click on a link with class "video"?
if( e.target.tagName == 'A' && e.target.classList.contains('video')){
var videoID = e.target.getAttribute('href');
// change the url
history.pushState(
{videoID: videoID}, // data
e.target.innerText, // title
'video-'+videoID // url path
)
changeVideo(videoID)
e.preventDefault();
}
}
// change the playing video to a new video ID
var changeVideo = function(videoID){
var src = 'https://www.youtube.com/embed/'+videoID;
document.getElementById("videoFrame").src = src;
}
// triggered when clicking on a video using the back/forward browser button
var onUrlChange = function(e){
changeVideo(e.state.videoID)
}
// bind the event listners
window.addEventListener('click', onVideoLinkClick);
window.onpopstate = onUrlChange;
With the following HTML
<div id="container">
<div id="leftdiv">
<div id="lectname">
<p><a class="video" href="M0mx8S05v60">Lec 01: What is Signal?</a></p>
<p><a class="video" href="F5h3z8p9dPg">Lec 02: What is an Analog Signal?</a></p>
<p><a class="video" href="jRL9ag3riJY">Lec 03: What is Digital Signal?</a></p>
<p><a class="video" href="izBaDRyqnBk">Lec 04: Need of Digital Signal</a></p>
<p><a class="video" href="2xXErGeeb_Q">Lec 05: Introduction to Digital Electronics</a></p>
<p><a class="video" href="RF9I6UzI4Rc">Lec 06: Switch and Bits Intuition</a></p>
</div>
</div>
<div id="rightdiv">
<iframe id="videoFrame" width="480" height="270" frameborder="0" allowfullscreen></iframe>
</div>
</div>
I have some issue:
I have some container, and three elements below this div. Three elements are images or iframe with vimeo embedded movie.
In first case i have :
<div id="media-content">
<iframe src="https://player.vimeo.com/video/1271?api=1" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>
And below:
<div class="media-list" id="media-list">
<span> <?php echo $this->Html->image('placeholder/video2.jpg');?> </span>
<span> <?php echo $this->Html->image('placeholder/video3.jpg');?> </span>
<span>
<iframe src="https://player.vimeo.com/video/127561?api=1" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</span>
</div>
And Jquery:
var media = $('#media-list img');
var mediaContainer = $('#media-content');
$(media).on('click',function(e){
var vals = $(this).parent().html();
$(mediaContainer).html(vals);
e.preventDefault();
console.log (e.target);
});
And now what this code does:
On clicking on video2.jog or video3.jpg, iframe in <div id="media-content"> is replaced with this clicked image. And this is ok.
But i want to show vimeo movie <div id="media-content"> on click at iframe inside.
So it's simple content swap, but the problem is, that i don't know how "transfer" vimeo iframe do another div, as clicking on it does nothing.
Thank You for any reply.
PS: To address this question, i send image, it shows 3 red spans and one big green div. CLicking on span should set his attr (in this case img).And this work, problem is,that clicking on vimeo span should open video in green div.enter image description here
When the browser loads/makes ready the DOM then iframe isn't included instantly. For the shake javascript or jquery canot get the inside element of the iframe as DOM haven't it, rather javascript or jquery only get the iframe tag.This is a critical and great problem with jquery & iframe when iframe load thing from different domain/host.
You can also get the iframe element by getting the span with jquery. But for this you have to give the 3rd span a a div and have to click on the div not on the iframe content to get desired solution.
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div id="media-content">
<iframe src="https://player.vimeo.com/video/1271?api=1" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>
<div class="media-list" id="media-list">
<span> <?php echo $this->Html->image('placeholder/video2.jpg');?> </span>
<span> <?php echo $this->Html->image('placeholder/video3.jpg');?> </span>
<span >
<div style="border: 1px solid red; z-index:3;width:80px;height:80px;padding:30px;">
<iframe src="https://player.vimeo.com/video/127561?api=1" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</span>
</div>
<script>
$(document).ready(function () {
var media = $('#media-list img');
var mediaContainer = $('#media-content');
$(media).on('click',function(e){
var vals = $(this).parent().html();
$(mediaContainer).html(vals);
e.preventDefault();
console.log (e.target);
});
var media2 = $('#media-list div');
$(media2).on('click',function(e){
var vals = $(this).html();
$(mediaContainer).html(vals).height("70%").width("70%");
e.preventDefault();
console.log (e.target);
});
});
</script>
I am trying to change a YouTube video iframe source with jQuery, but looks like running into cross origin issue. My jquery code:
var videourl = $(".videourl").html();
$(".actualyoutube iframe").attr('src',videourl);
iframe gets new src value, but no video is displayed. Any ideas?
extended explanation:
There is a popup div with embeded youtube video
<div class="youtubepopup">
<div class="closeyoutube">X</div>
<div class="actualyoutube">
<iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe>
</div>
</div>
There is a certain td which contains a new src url. There is no other place or way to get this url except from this td.
<td class="videourl">//youtube.com/whatevervideo</td>
And there is a script that should add src on open popup and remove on closing.
var videourl = $(".videourl").html();
$(".youtubecap").click(function() {
$(".actualyoutube iframe").attr('src', videourl);
$(".youtubepopup").fadeIn('slow');
});
$(".closeyoutube").click(function() {
$(".youtubepopup").fadeOut('slow');
$(".actualyoutube iframe").removeAttr('src');
});
$(".youtubepopup").click(function() {
$(".youtubepopup").fadeOut('slow');
});
p.s. now that i laid it out, user3385530 is probably right
You cannot show pages from www.youtube.com inside an iframe. The correct way is to use their video embed codes inside your web page. IFrame embeds are easier, the URL you need to display in an iframe looks like this:
http://www.youtube.com/embed/VIDEO_ID_GOES_HERE
Just place an iframe such as this inside your web page:
<div class="actualyoutube">
<iframe width="560" height="315" src="http://www.youtube.com/embed/VIDEO_ID_GOES_HERE" frameborder="0" allowfullscreen></iframe>
</div>
Finally, assuming you are able to extract video id from the URLs using jQuery, you can use this to display videos*:
var videoid = "S2ISrpNM-0s";
$(".actualyoutube iframe").remove();
$('<iframe width="420" height="315" frameborder="0" allowfullscreen></iframe>')
.attr("src", "http://www.youtube.com/embed/" + videoid)
.appendTo(".actualyoutube");
* Changing the src property of an iframe that is already displaying a YouTube video did not work; I therefore suggest destroy-iframe-recreate-iframe approach.
<div class="service-video-media">
<iframe id="main-play" width="560" height="315" src="https://www.youtube.com/embed/uTcj2v85y34" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="video-list">
<img src="https://img.youtube.com/vi/uTcj2v85y34/1.jpg" video-id="uTcj2v85y34" />
<img src="https://img.youtube.com/vi/jRuR4GaSsBI/1.jpg" video-id="jRuR4GaSsBI" />
<img src="https://img.youtube.com/vi/ec7aQPLSBsU/1.jpg" video-id="ec7aQPLSBsU" />
<img src="https://img.youtube.com/vi/uTcj2v85y34/1.jpg" video-id="uTcj2v85y34" />
<img src="https://img.youtube.com/vi/jRuR4GaSsBI/1.jpg" video-id="jRuR4GaSsBI" />
<img src="https://img.youtube.com/vi/ec7aQPLSBsU/1.jpg" video-id="ec7aQPLSBsU" />
</div>
</div>
<script>
jQuery(document).ready(function(){
jQuery('.video-list img').on('click',function () {
var videoId = jQuery(this).attr('video-id');
var videoUrl = 'https://www.youtube.com/embed/'+videoId;
jQuery('#main-play').attr('src',videoUrl);
});
});
</script>
This will not work because page is parsed and only on refresh with new ulr will happen.
You need to use ajax to pre-load the page with new url and then to set iframe.
i have a simple question regarding jquery, i have a long list of images directly uploaded from youtube, the image have the same v-code as the video itself, so for simpe downloading of all the videos on one page for browsers i made a list of images, once u click it, the video will appear on its place, the thing is that the code that i have oriented for video's image, but not on another one, anyway here is the code:
$('.youtube_thumb > img').click(function(){
var parts = this.src.split("/");
var id = parts[parts.length-2];
$('<iframe width="50%" height="300" src="http://www.youtube.com/embed/' + id + '?autoplay=1" frameborder="0" allowfullscreen></iframe>').insertAfter(this);
$(this).parent().parent().find(".name,.detail,.youtube_play").hide();
$(this).remove();
});
and the div
<div class="youtube">
<div class="name">
#left(name,30)#
</div>
<div class="detail">#left(detail,50)#</div>
<div class="youtube_play"></div>
<div class="youtube_thumb">
<img src="http://img.youtube.com/vi/#link#/0.jpg" style="width:50%;height:300px;border:0;" />
</div>
</div>
as u can see the code takes the img's src and sort the v-code and then put it inside the frame. But i want to work this code only after i click on the class youtube_play but not on youtube_thumb's image.
Thank you all for the help!
$('.youtube_play').click(function(){
var img = $(this).next().find('>img');
var parts = img.get(0).src.split("/");
var id = parts[parts.length-2];
$('<iframe width="50%" height="300" src="http://www.youtube.com/embed/' + id + '?autoplay=1" frameborder="0" allowfullscreen></iframe>').insertAfter(img.get(0));
img.parent().parent().find(".name,.detail,.youtube_play").hide();
img.remove();
});