Stop video html5 on close modal Materialize, using jquery - ruby-on-rails-4

I am using Materialize in app ruby on rails and want video stop closing modal Materialize.
Help me please.
<% #chapter.episode.each do |episode| %>
<a class="btn modal-trigger" href="#<%= episode.name %>"><%= episode.name %></a>
<div id="<%= episode.name %>" class="modal">
<i id="close" title="Cerrar" class=" modal-action modal-close waves-green right material-icons">close</i>
<div class="modal-content">
<video id="<%= episode.name %>" width="320" height="240" controls>
<source id="<%= episode.name %>" src="<%= episode.url %>" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'">
Your browser does not support the video tag.
</video>
</div>
</div>
<% end %>

First of all, you are setting the same id for multiple tags (div, video, source). ID must be unique in entire document.
Considering that you want to stop video when modal close, you can use the callback for complete event (modal close), in your Javascript/jQuery code:
$(document).ready(function(){
var videos = $("video");
$('.modal-trigger').leanModal({
complete: function() {
videos.each(function(){
this.pause();
});
}
});
});
This will pause all videos when modal close.

I know this is an old question, but it came up for me in search. I solved it by adding video into modal when it opens, then removing it when it closes. Here's my work.
$(document).on('click','.video-butt',function(){
$('#video-modal .video-container').html('<iframe id="myIframe" width="300" height="200" src="' + $(this).attr('href') + '?rel=0" allowfullscreen="true" ></iframe>'); // embed video
$('#video-modal').modal('open');
return false;
})
function videoTrash(){ //remove video embed on close
$('#video-modal .video-container').empty();
}
$('#video-modal').modal({onCloseEnd:videoTrash}); // initialize materialize modal
html
<div id="video-modal" class="modal black">
<div class="modal-content white-text">
<div class="video-container"></div>
</div>
</div>
the trigger link
<a class="btn btn-flat video-butt" href="https://www.youtube.com/embed/hO4tW8Py2xc">watch the video</a>

Related

"Bootstrap Modal Pop up" Youtube Video Autoplay, reopens the video when turned off

I've added a youtube video to my website that starts automatically at boot-up on the home page. The video opens as bootstrap modal pop up. However, when pop up closes, the video starts playing again in the background.
First, I want the video to start automatically.
Second, the video is automatically stopped when "pop up" is turned off.
Third, don't let the pop-up video start playing again in the background.
Version * Bootstrap v3.0.3
Thank you in advance for your help.
<!-- POPUP SCRIPT -->
<script>
$(document).ready(function(){
$("#myModal").on("hidden.bs.modal",function(){
$("#iframeYoutube").attr("src","#");
})
})
$(document).ready(function(){
$("#myModal").modal("show");
$("#myBtn").click(function(){
$("#myModal").modal();
});
});
</script>
<!-- HEADER -->
<header id="header" class="main__header"> </header>
<!-- POPUP BAŞLANGIÇ -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" style="background-color: #f9f9f900;">
<div class="modal-body" style="padding: 0px;">
<button type="button" class="close" style="padding:8px; background: white;" data-dismiss="modal">×</button>
<iframe id="iframeYoutube" width="100%" height="450px" alt="1" src="https://www.youtube.com/embed/example?&autoplay=1;rel=0&showinfo=0&controls=0&amp" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<!-- POPUP BİTİŞ -->
Firstly, you should trigger a function when pop-up is closed.This function should stop video to be played in the background.
$("#modal-close-button").click(function () {
$("#video-stop-button").click();
});
$("#video-stop-button").click(function () {
alert("The video should stop as the modal closes because a click on the close button will trigger the stop button ");
});
You should call this function whenever your pop-up is closed to prevent video to be played in the background.

"The maximum amount of data that you can upload is NaN undefined" error is coming on uploading an image using "Upload Media" button in Sitecore

I am trying to upload media using below procedure:
Click on "Browse" of Image field in a sitecore item.
Click on "Upload Media" button.
Click on "Browse for Media files" and upload a new image.
By following the above procedure, I am getting this error message:
The maximum amount of data that you can upload is NaN undefined.
Hence the image doesn't upload. However I am able to upload image in Media Library and then after linking the same to the item but when trying to upload media directly from content item, I am getting the error.
How to solve this problem?
PFB Form tag statement
<form data-sc-id="Uploader" data-sc-databasename="master" data-sc-maxrequestlength="-1024" data-sc-executiontimeout="600" data-sc-destinationurl="/sitecore/media
library/Images/Social/Connector/download" data-sc-filesizeexceededtext="The maximum amount of data that you can upload is" data-sc-timeoutext="The media files could
not be uploaded. Please try again." class="sc-uploader row sc_Uploader_42 data-sc-registered" data-sc-require="/-/speak/v1/business/uploader.js" method="POST"
enctype="multipart/form-data">
<img class="sc-uploader-preview hide">
<div class="sc-uploader-content">
<span class="drag">
Drag and drop files here
<br>
or
<br>
</span>
<a href="#" class="btn btn-default sc-button sc_Button_14 data-sc-registered">
Browse for media files
<input class="sc-uploader-fileupload" type="file" name="files[]" multiple="" data-url="/api/sitecore/Media/Upload?
database=master&destinationUrl=/sitecore/media library/Images/Social/Connector/download">
</a>
<div class="sc-uploader-general-info">
<div class="sc-uploader-general-info-progressbar progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"
style="display: none;">
<div class="bar data-sc-registered" data-bind="style: { width: globalPercentage() + '%' }" style="width: 0%;"></div>
</div>
<div class="sc-uploader-general-info-data" style="display: block;">
<div class="sc-uploader-general-info-data-col col1">
<div class="sc-uploader-general-info-data-uploadingData" style="display: none;"><span data-bind="text: uploadedSize" class="data-sc-
registered">0</span> of </div><span data-bind=" text: totalSize" class="data-sc-registered">11.2 Kb</span>
</div>
<div class="sc-uploader-general-info-data-col col2">|</div>
<div class="sc-uploader-general-info-data-col col3">
<div class="sc-uploader-general-info-data-uploadingData" style="display: none;">
<span data-bind=" text: uploadedFiles" class="data-sc-registered">0</span> of
</div>
<span data-bind=" text: totalFiles" class="data-sc-registered">1</span> <span data-bind=" visible: totalFiles() > 1" class="data-sc-registered"
style="display: none;">Files</span>
<span data-bind=" visible: totalFiles() === 1" class="data-sc-registered">File</span>
</div>
</div>
</div>
</div>
</form>
You need to check if you have set the maxRequestLength from the web.config or you can update it from the IIS.
Web.config Way
Navigate to the path: system.web/httpRuntime and check if you have an entry for httpRuntime. If not, you need to specify one as follows:
<httpRuntime maxRequestLength="512000" executionTimeout="3600" enableKernelOutputCache="false" relaxedUrlToFileSystemMapping="true" requestValidationMode="4.0" enableVersionHeader="false" />
Note that the length is in kilobytes
IIS Way
Open IIS
Click on the site you want to accept larger file sizes
In the main window double click ‘Request Filtering’
On the top tab right click to see options and select ‘Edit Feature Settings’
Now change the number in the field ‘Maximum allowed content length (bytes)’
If it is present, you may need to increase the length.
UPDATE
As you can see, the attribute data-sc-maxrequestlength="-1024" has a negative value and this is why the above error occurred. So, the issue is with the maxrequestlength.

How to make modals which have routes like Trello in Emberjs

I want to know how we can make modals which have routes.
In Trello, whenever you click on a card, the route changes from abc.com/b/personal to abc.com/c/some-random-string and the card opens in a modal. Also, when you close the modal, you get redirected to the previous url (abc.com/b/personal).
I want to know how can we achieve this using Emberjs.
Example: https://trello.com/b/ezWgKsol/sales-enterprise-feature-requests-sample
Here is my modal (using foundation) where we delete a record:
<div class="reveal" id="deleteLocationModal" data-reveal>
<div class="row">
<div class="columns">
Are you sure you want to delete this location?
</div>
</div>
<div class="row">
</div>
<div class="row">
<div class="columns">
<button id="cancelButton" class="secondary button" data-close type="button">Cancel</button>
<button id="deleteButton" class="button" {{action "deleteLocation" model}} data-close type="button">Delete</button>
</div>
</div>
</div>
The router has the falling in the actions hash:
actions: {
deleteLocation(model) {
Ember.assert("Params must be provided", model);
model.save().then(( /* response */ ) => {
this.transitionTo('locations'); //locations is my index page.
//flash message to inform the user of success.
});
}, (error) => {
//handle error.
// display flash message
// rollback any dirty attributes
});
}
I hope this helps,
Jeff

modal only shows dark background

I'm trying to create a bootstrap modal within an RoR project. I'm using the verb login, but not using Devise. I'm just trying to figure out the modal without the complexity of adding
Devise!
I seem to reach the server after clicking on the login link but I only get gray overlay!
application.htm.erb
<div class="container">
<div class="well">
<%= link_to 'login', login_url,
{:remote => true,
'data-toggle' => "modal",
'data-target' => '#login',
:class => "btn btn-primary "} %>
</div>
</div>
<div id="login" class="modal hide fade"></div>
_login.html.erb
<div class="modal hide fade in" id="login">
<div class="modal-header">
<button class="close" data-dismiss="modal">x</button>
<h2>Sign in</h2>
</div>
<div class="modal-body">
<h2>Login form will go here</h2>
</div>
<div class="modal-footer">modal footer text</div>
</div>
login.js.erb
$("#login-modal").html("<%= escape_javascript(render 'login') %>")
$("#login-modal").modal("show")
site#login
def login
respond_to do |format|
format.js
end
end
console output
Started GET "/login" for 127.0.0.1 at 2014-07-28 16:38:59 -0700
Processing by SiteController#login as JS
Rendered site/_login.html.erb (0.0ms)
Rendered site/login.js.erb (1.0ms)
Your modal's markup seems incorrect. Looks like you took it from an old Bootstrap 2 example? Compare it against the examples in http://getbootstrap.com/javascript/#modals .
Problems in your code include:
You shouldn't use the hide or in classes
Missing modal-dialog and modal-content <div>s
What resource/example did you base your code off of?

ModX: Using GetResources to display multiple pages in one page

I am trying to use getResources to display multiple resources withing one resource, including their Templates and TVs.
The code I have in the page I want to display them is:
[[!getResources? &parents=`50` &sortdir=`ASC` &sortby=`menuindex` &limit=`100` &includeTVs=`1` &processTVs=`1` &tpl=`gigtemp` ]]
Where &tpl=gigtemp is a chunk I have created where all my template HTML and TVs are.
However, nothing is showing on the page.
Can anyone help me out?
Please let me know if I need to explain more.
Update:
Some of the info is showing, but a lot of the html is broken.
My HTML on the Chunk is:
<div class="gig-guide">
<div class="gig-info">
<h2>[[+tv.gigname]]</h2>
<strong>[[=tv.gigcity]]</strong>
<img src="[[+tv.gigthumb]]" alt="Contra Clave Contra Event: [[+tv.gigname]" /></div>
<div class="gig-info">
<h2>[[+tv.gigdate]]</h2>
[[+tv.gigtime]]</div>
<div class="gig-info">
<h2>[[+tv.gigvenue]]</h2>
[[+tv.gigaddress]]</div>
<div class="gig-info">
<h2>[[+tv.gigcost]]</h2>
</div>
<div class="gig-bottom">
<div class="fb-like" data-href="[[+tv.gigfbevent]]" data-send="false" data-width="300" data-colorscheme="dark" data-show-faces="false"> </div>
<div class="gigsocialmedia"><img src="assets/images/ccc-fb.png" alt="This event on Facebook" /> <a class="twitter-share-button" href="https://twitter.com/share?text=[[+tv.gigtwitter]]" target="_blank" data-lang="en"><img src="assets/images/ccc-twiter.png" alt="Tweet this event" /></a> <img src="assets/images/ccc-email.png" alt="Email this event to a friend" /></div>
</div>
<!--END GIG BOTTOM DIV-->
<!--END GIG GUIDE DIV-->
Again, any help is appreciated!
Your code is valid and as far as I can see, without errors. That means that there is something else wrong, I would guess one of the following:
You have not cleared your cache, which is not necessary but could solve weird problems
The children of resource 50 is not published or is hidden
There is something else wrong around your code, making Modx not parsing it correctly.
Edit: You had several errors in your chunk. Try replacing it with this:
<div class="gig-guide">
<div class="gig-info">
<h2>[[+tv.gigname]]</h2>
<strong>[[+tv.gigcity]]</strong>
<img src="[[+tv.gigthumb]]" alt="Contra Clave Contra Event: [[+tv.gigname]]" /></div>
<div class="gig-info">
<h2>[[+tv.gigdate]]</h2>
[[+tv.gigtime]]</div>
<div class="gig-info">
<h2>[[+tv.gigvenue]]</h2>
[[+tv.gigaddress]]</div>
<div class="gig-info">
<h2>[[+tv.gigcost]]</h2>
</div>
<div class="gig-bottom">
<div class="fb-like" data-href="[[+tv.gigfbevent]]" data-send="false" data-width="300" data-colorscheme="dark" data-show-faces="false"> </div>
<div class="gigsocialmedia"><img src="assets/images/ccc-fb.png" alt="This event on Facebook" /> <a class="twitter-share-button" href="https://twitter.com/share?text=[[+tv.gigtwitter]]" target="_blank" data-lang="en"><img src="assets/images/ccc-twiter.png" alt="Tweet this event" /></a> <img src="assets/images/ccc-email.png" alt="Email this event to a friend" /></div>
</div>
<!--END GIG BOTTOM DIV-->
<!--END GIG GUIDE DIV-->
Are your resources you are trying to display hidden? then you need the &showHidden=1 .
Are they unpublished? then you also need the &showUnpublished=1
You may also need the &includeContent=1 ~maybe~
See if you can get away without using the &processTVs
If you are still having issues - leave out the &tpl=``, getResources will just dump it's output to the page so you can see what is actually being returned. Might give you another clue as to what is not happening..