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>
Related
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");
}
When loading the page automatically iframe also loading, it must not have to do like that
When i click button, then only iframe need to load but in iframe there is url
Can you give me example in jsfiddle, please
<input type="button">Load</input>
<div class="copy">
<iframe id="font" src="${SubscriptionUrl }" frameborder="0" height="500px" width="100%"></iframe>
</div>
You can hide your iframe onload and then display when clicked.
<button id="btnLoad" type="button">Load</button>
<div class="copy">
<iframe style="display:none;" id="font" src="${SubscriptionUrl }" frameborder="0" height="500px" width="100%"></iframe>
</div>
<script>
const btnLoad= document.getElementById('btnLoad');
btnLoad.addEventListener("click", function(){
document.getElementById("font").style.display = "block";
});
</script>
Use an <a>nchor and an <iframe>. No JavaScript required.
Set a [name] attribute for <iframe>
ex. <iframe name="iframe0" src="about:blank" ...></iframe>
Set the <a>nchor [href] attribute to the url of intended destination.
ex. <a href="https://www.example.com" ...>...</a>
Set the <a>nchor [target] attribute to the <iframe> [name] attribute.
ex. <a href="https://www.example.com" target="iframe0"...>...</a>
Demo
html,
body {
height: 100%;
width: 100%;
font: 400 16px/1.5 Consolas;
}
.btn {
text-align: center;
}
a {
text-decoration: none;
}
<button class='btn'>
VIDEO
</button>
<figure class='box'>
<iframe name='frame0' src="about:blank" frameborder="0" width="480" height="270"></iframe>
</figure>
Initially set one attribute to iframe .While clicking button take the attribute from the iframe and set that to iframe src.
Just Check the fiddle
What I have now satisfies me in terms of an overall effect: Click on "show me", it displays an YT Video, when clicked once again - vid will hide etc. BUT even when site is loaded in the first place (and YT video is hidden) - all of its (Mb) size is counted as it was displayed causing the website to load slowly. My question is how to load the embeded video (with its size) only after I clicked on "Show me" element.
This is what I have:
HTML:
<div class="#">
<span class="#" id="show_me"><i class="icon fa-angle-down"></i>Show Me</span>
<span class="#" id="shown">
<iframe width="100%" height="315" src="https://www.youtube.com/embed/#" frameborder="0" allowfullscreen></iframe>
</span>
</div>
JS:
$(document).ready(function(){
$("#show_me").click(function(){
$("#shown").toggle();
});
});
CSS:
#shown {
display: none;
}
Try something like this:
HTML:
<div class="#">
<i class="icon fa-angle-down"></i>Show Me
<div id="i_frame"></div>
</div>
JS:
$(document).ready(function(){
$("#show_me").click(function(e){
e.preventDefault();
if ($(this).is(".opened") ) {
$(this).removeClass("opened");
$(this).find(".icon").removeClass("fa-angle-up").addClass("fa-angle-down");
$("#i_frame").hide().html("");
} else {
$(this).addClass("opened");
$(this).find(".icon").removeClass("fa-angle-down").addClass("fa-angle-up");
$("#i_frame").show().html("<iframe width='100%' height='315' src='https://www.youtube.com/embed/#' frameborder='0' allowfullscreen></iframe>");
}
});
});
CSS:
#i_frame {
display: none;
}
https://jsfiddle.net/jeremykenedy/fkcnncjm/
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 have created popup window with the div tag when user click to watch specified video:
<div class="popup" >
<h2 class="popup_header center">Tutorial - 2</h2>
<p class="popup_sub_header center"> Tutorial Label </p>
<div class="popup_video_container">
<div class="video_frame pop_mode" id="popUpVideoWindow">
<iframe width="640" height="320" src="https://www.youtube.com/embed/link" frameborder="0" allowfullscreen="" hspace="0" vspace="0"></iframe>
</div>
<div class="tutorial_description">
</div>
</div>
<a class="close" href="#close"></a>
</div>
Now when i close this window video does not going to stop, continuing buffering and playing with other stuffs.
I have gone through other questions and found afterClose, on('hidden') method to work on class and idlike this one:
$('.popUpVideoWindow').on('hidden',function(){
$iframe = $(this)find("iframe");
$iframe.attr("src", $iframe.attr("src"));
console.log("Link set:" , $iframe.attr("src"));
});
and
$("#video_frame").bind('afterClose', function(){{
$iframe = $(this)find("iframe");
$iframe.attr("src", $iframe.attr("src"));
console.log("Link set:" , $iframe.attr("src"));
});
but it doesnt going to help me what i want. I want to stop playing the video when i close that popup div.
var figure = $(".video");
var vid = figure.find("video");
[].forEach.call(figure, function (item,index) {
item.addEventListener('mouseover', hoverVideo.bind(item,index), false);
item.addEventListener('mouseout', hideVideo.bind(item,index), false);
});
function hoverVideo(index, e) {
vid[index].play();
}
function hideVideo(index, e) {
vid[index].pause();
}
Check this example with this JSFiddle
Make necessary changes.
check it please..regds