Adding you tube player (iFrame) in jQuery modal dialog - javascript

I have some images in my HTML and _I need to play embedded you tube video videos on click of each image which should load/play in a jQuery UI dialog. Basically like a pop up video player.
So here is what i have done to play/attach video with each image. I have three images and i have added the unique video id in my custom data-attribute which i taken from you tube.
HTML
<div id="ImageBox">
<img src="img1.png" class="playVideo" alt="" id="image1" data-videoId="v6jg8g"/>
<img src="img2.png" class="playVideo" alt="" id="image2" data-videoId="re84hj"/>
<img src="img3.png" class="playVideo" alt="" id="image3" data-videoId="dhj3fk"/>
</div>
<!-- HTML for jQuery modal dialog -->
<div id="MyVideoPlayer">
<div>
<strong id="videoTitle">title for video</strong>
<img src="closeButton.png" id="Close" alt="Close" />
</div>
<iframe src="https://www.youtube.com/embed/MyVideoId?wmode=opaque&autoplay=1&autohide=1&showinfo=0&controls=2&rel=0&enablejsapi=1" id="Player" width="100%" height="100%"></iframe>
</div>
Note: I am using iframe embed method from you tube player
API
to embed videos.
For JavaScript/jQuery section, I came up with two choices here.
1. Because i am working in a ASP.NET MVC 3 app, i can set the unique video id to #ViewBag in script and assign to iFrame like this...
$('#ImagesBlock .playVideo').click(function(){
var myId = $(this).attr('data-videoId');
'#ViewBag.VideoId' = myId;
$('#MyVideoPlayer').dialog(
{ width: 'auto' },
{ height: 'auto' },
{ draggable: false },
{ resizable: false },
{ closeOnEscape: false },
{ modal: true },
{ show: { effect: "fade", duration: 200} }
});
});
2. Assign the updated iFrame src with new video id each time dialog
opens.
$('#imagesBlock .playVideo').click(function(){
var myId = $(this).attr('data-videoId');
var src = 'https://www.youtube.com/embed/'+ myId +'?wmode=opaque&autoplay=1&autohide=1
&showinfo=0&controls=2&rel=0&enablejsapi=1';
$('#MyVideoPlayeriframe').attr('src', src);
$('#MyVideoPlayer').dialog(
{ width: 'auto' },
{ height: 'auto' },
{ draggable: false },
{ resizable: false },
{ closeOnEscape: false },
{ modal: true },
{ show: { effect: "fade", duration: 200} }
});
});
Which one should I go with. I found some references though,
Embedded jwplayer into jQuery Dialog
https://stackoverflow.com/questions/15887106/how-to-get-embedded-video-into-modal-dialog
jQuery mb.YTPlayer
Is there any way i can make it little more simplified and re-usable in future. Please advise with your wise opinion.

I am little late updating this thread but I managed to create a method or more of a plugin by extending jQuery's prototype object. This is a nice link to start learning.
// following is the method by extending the jQuery's prototype object
// to convert and embed an element into a video pop-up
(function ($) {
$.fn.videoPlayer = function (options) {
var defaults = $.extend({
title: "",
videoId: "",
autoplay: 1
}, options);
var videoBox = this.find('#VideoBox');
var videoElement = document.createElement('iframe');
var src = 'https://www.youtube.com/embed/' + defaults.videoId + '?wmode=opaque&autoplay=' + defaults.autoplay + '&autohide=1&showinfo=0&controls=2&rel=0&enablejsapi=1';
this.find('#VideoTitle').text(defaults.title);
$(videoElement).attr({
'src': src,
'frameborder': 0,
'width': '100%',
'height': '90%'
});
videoBox.html(videoElement);
this.dialog(
{ width: 'auto' },
{ height: 'auto' },
{ draggable: false },
{ resizable: false },
{ closeOnEscape: false },
{ modal: true },
{ show: { effect: "fade", duration: 200} },
{ hide: { effect: "fade", duration: 250} },
{ close: function (event, ui) {
$(videoElement).remove();
$(this).dialog('destroy');
}
});
//making the method chainable!
return this;
};
})(jQuery);
$(function(){
$('#VideoPlayerPopUp #Close').click(function () {
$("#VideoCatcher").dialog("close");
});
$('#Entertainment .launch-video').click(function () {
var element = $(this);
$('#VideoCatcher').videoPlayer({
title: element.attr('data-videoTitle'),
videoId: element.attr('data-videoId')
});
});
});
I have used custom HTML data-attributes for video title and video id. This will keep HTML clean and semantic. You can of course style/customize the pop-up accordingly.
Visit this working demo to see this in action.

Related

jQuery lazyload on carouFredSel

Im using jquery lazyload to load my images
but a part of my website has carouFredSel
when i click on next button the next images are not loaded because require to scroll the page, so is there any way to get images loaded on every slide?
jQuery(".foo4").carouFredSel({
auto: !1,
prev: ".prev4",
next: ".next4",
pagination: ".pager4",
mousewheel: !0,
swipe: {
onMouse: !0,
onTouch: !0
}
}),
above code is the javascript to slide the carousel and below I have my lazyscript
jQuery("img.lazy").lazyload();
Any help is very appreciated!
In carouFredSel, you provide the image url in data-src like
<img data-src="image-url"/>
So to show the image in you need to configure, in OnBefore of carouFredSel like.
scroll: {
onBefore: function( data ) {
var $current = data.items.visible.first(),
visible = data.items.visible,
src = visible.data('src');
visible.attr('src', src);
}
}
Add this lines in your carouFredSel code like
jQuery(".foo4").carouFredSel({
auto: !1,
prev: ".prev4",
next: ".next4",
pagination: ".pager4",
mousewheel: !0,
swipe: {
onMouse: !0,
onTouch: !0
},
scroll: {
onBefore: function( data ) {
var $current = data.items.visible.first(),
visible = data.items.visible,
src = visible.data('src');
visible.attr('src', src);
}
}
});
I believe I solved this issue for lazy loading images with caroufredsel
$('#youtube-playlist').carouFredSel({
width: '100%',
height: "variable",
circular: false,
infinite: false,
responsive: true,
items: {
visible: {
min: 2,
max: 4
}
},
onCreate: function(data) {
// Swap data-src for first 4 items
// console.log(data);
$(this).find("img[data-src]").each(function (i, item) {
$(this).attr('src', $(this).attr('data-src')).removeAttr('data-src');
return i < data.items.length-1;
});
},
scroll: {
onBefore: function(data) {
// Lazyload next visible thumbnails
// console.log(data.items.visible.length);
for ( i = 0; i < data.items.visible.length; i++ ) {
var $img = data.items.visible.eq(i).find('img');
$img.attr('src', $img.attr('data-src') ).removeAttr('data-src');
}
}
},
align: 'center',
auto: false,
prev: '#prev',
next: '#next'
});
onCreate : find first visible images and swap data-src to src attribute.
Scroll onBefore : Iterate through the next visible items and swap attributes.
Inspect the Network [filter img] tab in chrome dev tools and watch as the lazyload happens.
I tried adding a width value to my items to remove the console log notice from caroufredsel but it doesn't like the lazyload onCreate.

jwplayer play one video and stop all of the others

I have multiple jwplayer videos on my page with the following config:
$(function(){
//add attributes to your ".video" DIV placeholder to customimize output
//example: data-autostart="true" - see customSettings Object below.
if (typeof(jwplayer) !== 'undefined'){
$('.video').each(function(){
var vid = $(this),
videoSettings = {},
settings = {
autostart: false,
width: '100%',
aspectratio: '16:9',
image: ''
},
customSettings = {
autostart: vid.attr('data-autostart'),
width: vid.attr('data-width'),
aspectratio: vid.attr('data-aspectratio'),
image: vid.attr('data-image')
};
$.extend(videoSettings, settings, customSettings);
var playerInstance = jwplayer( vid.attr('id') ).setup({
primary: "flash",
file: Drupal.settings.basePath + $(this).attr('data-src'),
autostart: videoSettings.autostart,
aspectratio: videoSettings.aspectratio,
image: Drupal.settings.basePath + videoSettings.image,
skin: "glow",
stretching: "exactfit",
width: videoSettings.width,
ga:{idstring: videoSettings.videotitle,
trackingobject: "pageTracker"
}
});
});
}
});
I have tried to add this:
events: {
onReady: function ()
{
jwplayer($('.video').id).stop();
}
},
but I am getting the following error:
[.PPAPIContext]GL ERROR :GL_INVALID_ENUM : glTexImage2D: target was GL_TEXTURE_RECTANGLE_ARB
is there a way to make all other videos stop when one is played?
It worked for me...
if(typeof jwplayer().stop === "function" ){
jwplayer().stop();
}

CarouFredSel add content dynamically

I try to add content on the fly to a CarouFredSel slider. The content is inserted fine but CourFredSel does not recognize the new content. Is there a way to tell the slider that the slide count has changed?
jQuery(document).ready(function() {
jQuery('#carousel').carouFredSel({
items: 4,
direction: "left",
responsive: true,
infinite: false,
circular: false,
scroll: {
items: 2,
duration: 1000
},
next: {
button: "#slider-button-next",
key: "right",
onBefore: function () {
loadAdditionalContent();
}
},
prev: {
button: "#slider-button-prev",
key: "left"
},
auto: {
play: false
}
});
});
function loadAdditionalContent () {
jQuery('#carousel').trigger('insertItem', ['<img src="http://dummyimage.com/200x200" class="added" />']);
}
Here is a fiddle that describes the problem: http://jsfiddle.net/bg0xyj8k/
there is nothing wrong with your code:
fix this in jsfidle: use external reference without https: http://cdnjs.cloudflare.com/ajax/libs/jquery.caroufredsel/6.2.1/jquery.carouFredSel.packed.js
I did some changes in your code, did not understanding what are you trying to do there.
jQuery( "#slider-add-items" ).click(function() {
loadAdditionalContent();
});
function loadAdditionalContent () {
id++;
jQuery('#carousel').trigger('insertItem', ['<img src="http://dummyimage.com/200x200" class="added" id="'+ id +'" />']);
}
http://jsfiddle.net/bg0xyj8k/2/
UPDATE
- be more precise when you are asking someting
FIX 1: insert at next click before fist visible element - http://jsfiddle.net/bg0xyj8k/3/
FIX 2: insert on last position of the slider when next clicked - http://jsfiddle.net/bg0xyj8k/4/ - result => infinite next click

AlloyUI modal reuse modal

I'm working on a AlloyUI modal window that is present in many pages of my application. The modal structure is actually the same, the only thing that changes is the bodyContent text for each page. I'm trying to reuse the AlloyUI modal script, only updating the bodyContent parameter rather than create 20 modal scripts for each page, but it's script nightmare for me as I have not found any code I can look at. I created a jsfiddle as an example and down below is the script I've been working. I'd appreciate your help.
http://jsfiddle.net/x9t3q0bs/
YUI().use('aui-modal', function(Y) {
var helpModConfIdent = Y.one('#showHelpPageConfirmIdentification'),
helpModQuestions = Y.one('#showHelpPageQuestions'),
helpPageConfirmIdentRetCust = Y.one('#showHelpPageConfirmIdentRetCust')
var modal = new Y.Modal({
bodyContent: "<p>Here will show help modal1.</p>",
centered: true,
destroyOnHide: false,
headerContent: '<h3>Help info</h3>',
modal: true,
render: '#modal',
visible: false,
width: 800,
toolbars: {
}
});
modal.addToolbar([{
label: 'Close',
cssClass: 'btn-primary-content',
on: {
click: function() {
modal.hide();
}
}
}]);
modal2 = new Y.Modal(
{
bodyContent: "<p>Here will show help modal2.</p>",
centered: true,
destroyOnHide: false,
headerContent: '<h3>Help info</h3>',
modal: true,
render: '#modal',
visible: false,
width: 800,
toolbars: {
}
}
);
if (helpModConfIdent) {
helpModConfIdent.on('click', function (e) {
modal.show();
});
} else if (helpModQuestions) {
helpModQuestions.on('click', function (e) {
modal2.show();
});
}
});
Thanks
The bodyContent is one of the attributes that is available to be set if you have access to the modal instance. Otherwise, you can always manipulate the html within the template that has been rendered.
YUI().use('aui-modal', function(Y) {
var modal = new Y.Modal({
bodyContent: "<p>Default implementation</p>",
centered: false,
destroyOnHide: false,
headerContent: '<h3>Help info</h3>',
modal: true,
render: '#modal',
visible: false,
width: 250
});
Y.one('#modalInstance').on('click', function(){
modal.set('bodyContent', "<p>Something loaded using the orginal modal instance</p>")
modal.show()
})
Y.one('#nodeInstance').on('click', function (e) {
Y.one('#modal .modal-content .modal-body').setHTML('<p>Set using the node instance</p>')
modal.show()
})
});
<script src="http://cdn.alloyui.com/3.0.0/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/3.0.0/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>
<div id='modalInstance'>Modal Instance</div>
<br/>
<div id='nodeInstance'>Node Instance</div>
<div class="yui3-skin-sam">
<div id="modal"></div>
</div>

Show Popup on Click

Following code, but it is not working.
$('#img').on('click', function () {
$("#new").dialog({
autoOpen: true,
position: { my: "center", at: "top+350", of: window },
width: 1000,
resizable: false,
title: 'Add User Form',
modal: true,
open: function () {
$(this).load('#Url.Action("_new", "Help")');
},
buttons: {
"Add User": function () {
addUserInfo();
},
Cancel: function () {
$(this).dialog("close");
}
}
});
return false;
});
I have a partial view name _new in Help Folder Under Views.
Can someone guide me too achieve it. I am using MVC4 framework :)
You have to move the click to the anchor (a) instead of the img. The click event will never reach the img.
See jsfiddle.

Categories