i am programming a website with Bootstrap and the family/forest one page template (on themeforest.net), i customized the portfolio section of this template to have a video popup when we click on the thumbnail (instead of a full image popup originally).
The popup works perfectly with the 'mfp-iframe' class and the 'video/video_name.mp4' href, so here the code:
I don't wanna use a mp4 video but a vimeo video and it s not working when i replace the href 'video/video_name.mp4' by a vimeo link 'https://vimeo.com/118901221' or a embed vimeo link 'https://player.vimeo.com/video/118901221'
Please somebody can help to resolve that issue.
You just need the following codes below and try to analyze my problem about Vimeo last time MAGNIFIC-POPUP: Embed videos from Vimeo on my site using magnefic popup. If ever you encounter my problem in Vimeo.
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Fontawesome -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- Magnific Popup CSS-->
<link rel="stylesheet" type="text/css" href="css/magnific-popup.css">
</head>
<body>
<a class="vimeo-video-1" href="#">CLICK ME TO POP-UP 1 VIDEP</a><br>
<a class="vimeo-video-more" href="#">CLICK ME TO POP-UP MORE VIDEO</a>
<!--Jquery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap JS -->
<script src="js/bootstrap.min.js"></script>
<!-- Magnific Popup JS -->
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/magnific-popup-options.js"></script>
</body>
</html>
<script type="text/javascript">
$('.vimeo-video-1').magnificPopup({
items: [
{
src: 'https://player.vimeo.com/video/118901221',
type: 'iframe' // this overrides default type
}],
gallery: {
enabled: false
},
type: 'image'
});
//MORE VIMEO VIDEO
$('.vimeo-video-more').magnificPopup({
items: [
{
src: 'https://player.vimeo.com/video/118901221',
type: 'iframe' // this overrides default type
},
{
src: 'https://player.vimeo.com/video/211690338',
type: 'iframe' // this overrides default type
},],
gallery: {
enabled: true
},
type: 'image'
});
</script>
You need to supply the direct link to the video. In the case of vimeo, this is only available if you've paid for a premium account. A solution would be to re-upload the video to YouTube and then get the direct link by doing this:
Copy the full URL to the video on YouTube.
Install VLC Media Player and open it.
Hit Media (menu)... and Open Network Stream.
Paste your video URL there and hit Play.
Hit Tools (menu)... Media Information. You'll find the direct URL to the video there. Use this in your website.
If you want to actually embed from YT or vimeo, check this out:
$(document).ready(function() {
$('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false
});
});
<a class="popup-youtube" href="http://www.youtube.com/watch?v=0O2aH4XLbto">Open YouTube video</a>
From the documentation.
And this question.
Related
How to disable click on .lg-img-wrap?
I have tried lot of solutions but none seems to work on lightgallery.
Tried 1
$(".lg-img-wrap").children().unbind('click');
Tried 2
$(".noclick").click(function(e) {
e.preventDefault();
e.stopPropagation();
});
Tried 3
pointer-events:none //to a css property
I would like to prevent closing of light gallery when user clicks outside the image.
Black margin is visible when image ratio is not same as that of screen size.
Please check image below for reference.
Light Gallery I am using: https://github.com/sachinchoolur/lightGallery
Add closeable: false to your lightGallery initialization. Here's their API describing that feature.
Working Codepen
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.10.0/css/lightgallery.css" integrity="sha512-I/g40Mx7U2Oepd3iHIpQRqdQGJ3vgdw0ix8LxGxX9zKv1MDizjD6dRcJ3PC1qpyfkj4rikVNcpBKcnmuJWUaTQ==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.10.0/js/lightgallery.min.js"></script>
</head>
<div id="lightgallery">
<a href="https://via.placeholder.com/150">
<img src="https://via.placeholder.com/150" />
</a>
</div>
<script type="text/javascript">
$('#lightgallery').lightGallery({
closable: false
});
</script>
</html>
$(".lg-img-wrap").off("click");
or
$(".lg-img-wrap").prop("disabled",true);
or
$('.lg-img-wrap"').click(false);
I hope it works for you. good work.
I am trying to insert a Facebook embed video on my HTML code. Following is the sample code provided in the Facebook player documentation.
<html>
<head>
<title>Your Website Title</title>
</head>
<body>
<!-- Load Facebook SDK for JavaScript -->
<script>
window.fbAsyncInit = function() {
FB.init({
appId: "{your-app-id}",
xfbml: true,
version: "v3.2"
});
// Get Embedded Video Player API Instance
var my_video_player;
FB.Event.subscribe("xfbml.ready", function(msg) {
if (msg.type === "video") {
my_video_player = msg.instance;
}
});
};
</script>
<div id="fb-root"></div>
<script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>
<!-- Your embedded video player code -->
<div class="fb-video" data-href="https://www.facebook.com/facebook/videos/10153231379946729/" data-width="500" data-allowfullscreen="true"></div>
</body>
</html>
But on iOS devices, it is playing only in fullscreen mode. Is there a way I can play video without going to fullscreen?
Thanks!
I'm wanting to create a "Latest Video" block on my website, but I only need the YouTube thumbnail image and MAYBE the title of the video. I found a method for doing an embed for the latest video itself, but I'm uncertain if I can modify it for just the thumbnail.
<!DOCTYPE html>
<html>
<head>
<title>YouTube Recent Upload Thing</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
</head>
<body>
<div id="static_video"></div>
<script type="text/javascript">
function showVideo(response) {
if(response.data && response.data.items) {
var items = response.data.items;
if(items.length>0) {
var item = items[0];
var videoid = "http://www.youtube.com/embed/"+item.id;
console.log("Latest ID: '"+videoid+"'");
var video = "<iframe width='420' height='315' src='"+videoid+"' frameborder='0' allowfullscreen></iframe>";
$('#static_video').html(video);
}
}
}
</script>
<script type="text/javascript" src="https://gdata.youtube.com/feeds/api/users/urusernamehere/uploads?max-results=1&orderby=published&v=2&alt=jsonc&callback=showVideo"></script>
</body>
</html>
Can this be repurposed for my idea? And how can I do it if it can't? I have basic HTML and CSS knowledge, with a very limited understanding of javascript and php. If I can just get something that will swap the thumbnail and ideally display the title, I can handle styling and implementation. Also interested in the same for specific playlists' most recent addition, but that doesn't have to happen.
Not sure if this is what you mean but you can try something like:
<div onclick="this.style.display='none'; this.nextSibling.style.display='block';"><img src="image.png" style="cursor:pointer" /></div><div style="display:none">
<!-- Embed code here -->
</div>
I am trying to stream HLS media trough videojs, but its not working.
I am aware that desktop browsers do not support HLS, but its not working on android/ios devices also...
I get an error: no compatible source was found for this video
Can anyone take a look at my code, and spot any errors?
Streams are working on my local server, tested with VLC so problem must be somewhere on my configuration of videojs.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link href="http://belelros.github.io/videojs-playLists/css/main.css" rel="stylesheet">
<link href="http://belelros.github.io/videojs-playLists/css/normalize.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Rokkitt' rel='stylesheet' type='text/css'>
<link href="//vjs.zencdn.net/4.9/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.9/video.js"></script>
<script src="https://rawgithub.com/Belelros/videojs-playLists/master/lib/videojs-playlists.js" data-cover></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="main.js"></script>
</head>
<div class="video-holder centered">
<video id="video" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="640"
data-setup=''
poster="">
</video>
<div class="playlist-components">
<script>
var videos = [
{
src : [
'http://192.168.1.165/streamtest1.m3u8'
],
poster : 'images/bbc_news.png',
title : 'BBC WORLD NEWS'
},
{
src : [
'http://192.168.1.165/streamtest2.m3u8'
],
poster : 'images/al_jazeera_english.png',
title : 'AL JAZEERA'
},
{
src : [
'http://192.168.1.165/streamtest3.m3u8'
],
poster : 'images/viasat_explore.png',
title : 'Viasat Explore'
}
];
</script>
<div class="playlist">
<ul></ul>
</div>
</div>
</div>
</body>
</html>
I am using a playlist plugin for videojs
https://github.com/jgallen23/videojs-playLists
Maybe i should define video type somewhere?
I fixed it, added m3u8 extension to videojs-playlist.js
player.pl._guessVideoType = function(video){
var videoTypes = {
'webm' : 'video/webm',
'mp4' : 'video/mp4',
'm3u8' : 'application/x-mpegURL',
'ogv' : 'video/ogg'
};
Please add hls support using following
npm install --save videojs-contrib-hls.js
OR
Include videojs-contrib-hls.js from CDN.
https://unpkg.com/videojs-contrib-hls.js#3.2.0/dist/videojs-contrib-hlsjs.min.js
Play HLS, DASH, and future HTTP streaming protocols with video.js, even where they're not natively supported.
Included in video.js 7 by default!
have a look here
I am trying to have a video and audio in a html page. I kinda having the video working fine but the audio is not showing up. Any help would be appreciated
http://www.wholesalewealthmachine.com/abc/
<div id="video" style="border: 1px solid rgb(204, 204, 204); width: 490px; height: 385px; margin:0 auto;">
<script type="text/javascript">
flowplayer("player", "flowplayer-3.2.2.swf",{
plugins: {
controls: null
},
canvas: {backgroundColor: '#ffffff',backgroundGradient: "none"}
,
clip: {
url: 'http://wholesaletoriches.com/newthankyouvideos/wwm new thankyou final/wwm new thankyou final.mp4'
},
onLoad: function() {
this.setVolume(100);
}}
);
</script>
</div>
<div id="audio" style="width:750px;height:30px;display:block">
<script language='javascript'>
$f("audio", "http://releases.flowplayer.org/swf/flowplayer-3.2.6.swf", {
// fullscreen button not needed here
plugins: {
controls: {
fullscreen: false,
height: 30,
autoHide: false
}
},
clip: {
autoPlay: false,
// optional: when playback starts close the first audio playback
onBeforeBegin: function() {
$f("player").close();
}
}
});
</script>
</div>
You need to grab the Flowplayer Audio plugin from
http://flowplayer.org/plugins/streaming/audio.html
then add this to your plugins parameters
plugins:{ audio: { url: "http:/yourpathtotheaudioplugin/flowplayer.audio.swf"} }
Credit to GraemeLeighfield at http://flowplayer.org/forum/2/47848
$f does not work. Instead of using $f use flowplayer. So it should look like:
flowplayer("audio", "http://releases.flowplayer.org/swf/flowplayer-3.2.6.swf", {...
This problem and the fix were reported in the Flowplayer forum just about one year ago. (see link) The developers of Flowplayer have not updated their documentation as far as I can tell. I had the same problem as Graeme. The fix he posted resolved the problem for me.
I've had trouble working though off site url's. It best if down load the code from flowplayer and load them onto your server.
Audio portion: http://flash.flowplayer.org/plugins/streaming/audio.html Scroll to bottom of page and down load 3 files
flowplayer.audio-3.2.10.swf
flowplayer.audio-3.2.10.zip
flowplayer.audio-3.2.10-src.zip
Place them in root directory.(ex.) Flow-Player-Audio
Place this script in head
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js">
</script>
<script src="http://www.domain.com/Flow-Player-Audio/flowplayer-3.2.6.min.js"></script>
<!-- set up player container -->
<a id="mb" style="display:block;width:250px;height:30px;"
href="http://www.domain.com/audio/something.mp3 or mp4"></a>
<script type="text/javascript">
// install flowplayer into container
$f("mb", "http://www.domain.com/Flow-Player-Audio/flowplayer-3.2.7.swf", {
// fullscreen button not needed here
plugins: {
controls: {
fullscreen: false,
height: 30,
width: 250,
autoHide: false
}
},
clip: {
autoPlay: false,
// optional: when playback starts close the first audio playback
onBeforeBegin: function() {
$f("player").close();
}
}
});
</script>
For video
down load
http://flash.flowplayer.org/download/
grab Download ZIP and Source code
place in swf file on server
script files
<!-- 1. jquery library -->
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js">
</script>
<!-- 2. flowplayer -->
<script type="text/javascript" src="js/flowplayer.js"></script>
<!-- 3. skin -->
<link rel="stylesheet" type="text/css" href="skin/minimalist.css" />
then just add your video tags.