I created a small youtube gallery. Clicking on one of the thumbnails plays the video in the main DIV. Although I have set REL=0 in the youtube iframe source, the related videos are still showing. Any ideas why this is happening?
This is a page where the issue is happening:
https://www.itaysharf.com/%D7%A0%D7%99%D7%95%D7%95%D7%9F-%D7%A8%D7%A9%D7%AA%D7%99%D7%AA/
HTML and JS code:
$(".video_wrapper li").click(function() {
$('html, body').animate({
scrollTop: $("#bigvid").offset().top
}, 1000);
});
$(".video_wrapper").on('click',"a", function(event) {
event.preventDefault();
event.stopImmediatePropagation();
event.stopPropagation();
$(".video_case iframe").prop("src", $(event.currentTarget).attr("href"));
});
<div class="video_case" id="bigvid">
<iframe width="705" height="445" src="https://www.youtube.com/embed/<?php the_field('main-video'); ?>?rel=0" frameborder="0" allowfullscreen allow="autoplay"></iframe>
<span class="desc"> <?php the_field('video-desc'); ?></span>
</div>
<?php if (get_field('video-id-1')): ?>
<div class="video_wrapper">
<ul>
<li class="video_thumbnail"><span class="video-btn"></span><img src="https://img.youtube.com/vi/<?php the_field('video-id-1'); ?>/mqdefault.jpg" alt="<?php the_field('video-alt-1'); ?>"/></li>
<li class="video_thumbnail"><span class="video-btn"></span><img src="https://img.youtube.com/vi/<?php the_field('video-id-2'); ?>/mqdefault.jpg" alt="<?php the_field('video-alt-2'); ?>"/></li>
<li class="video_thumbnail"><span class="video-btn"></span><img src="https://img.youtube.com/vi/<?php the_field('video-id-3'); ?>/mqdefault.jpg" alt="<?php the_field('video-alt-3'); ?>"/></li>
</ul>
</div>
<?php endif; ?>
Thanks for your help
Dan
https://developers.google.com/youtube/player_parameters#release_notes_08_23_2018
The behavior for the rel parameter is changing on or after September 25, 2018. The effect of the change is that you will not be able to disable related videos. However, you will have the option of specifying that the related videos shown in the player should be from the same channel as the video that was just played.
Related
I need to add a default value to a filter in Jquery mobile 1.3.0.
But the example below do not work.
<ul data-role="listview" data-autodividers="false" data-filter="true" data-inset="true" id="listviewID">
<?php foreach($countryList as $country): ?>
<li value="<?php echo trim(country); ?>"><?php echo trim(country); ?></li>
<?php endforeach; ?>
</ul>
$(document).ready(function() {
$(".ui-input-text.ui-body-c").val('Canada');
$('#listviewID').listview('refresh');
});
Refreshing the listview wont work, as it has already been rendered. The hack is modifying the input and firing an change event.
$(document).ready(function(){
$("#listviewID").prev("form").find("input[data-type=search]").val('Canada').trigger("change");
});
Note that the selector looks for the inmediate previous form (automatically created by jQM when you specify filterable) and the input with [data-type=search], thats more specific than .ui-input-text.ui-body-c.
FIDDLE
I'm developping an app with Ionic, and I have to display some video in playlist (I hoste them), so no Youtube player.
I use videoJS with plugin "videoJSPlaylist" : when a vdeo is finished, the next one play aotomatically, and I made "next" and "back" button to navigate in the playlist.
I had to remove the to make it work, otherwise it was not working. I have an issue on IOS where the back button is not working in the navbar. On the Chrome emulator and real android phone, the issue does not exist.
Maybe someone has a hint?
index.html :
...
<ion-side-menus>
<ion-pane ion-side-menu-content drag-content="main.dragContent">
<ion-nav-bar back-button-type="button-icon" back-button-icon="ion-ios7-arrow-back"animation="nav-title-slide-ios7">
<ion-nav-back-button class="button-icon ion-arrow-left-c"></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view animation="slide-left-right-ios7"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left" is-enabled="isLeftMenuEnabled">
......
</ion-side-menu>
</ion-side-menus>
My html with video :
<ion-view title={{title}} hide-back-button="false" id="sequence">
<div class="wrapper">
<div class="videocontent">
<video id="video" class="video-js vjs-default-skin vjs-playing vjs-fullscreen" preload="auto" controls data-setup="{}" width="auto" height="auto"></video>
<button type="button" ng-click="prev()" class="controls-prev">Previous</button>
<button type="button" ng-click="next()" class="controls-next">Next</button>
</div>
</div>
</ion-view>
Alright guys,
I'm pretty new to all this so sorry if i don't make sense, I wish to use SoundCloud in my jquery mobile pages. I've got the following iframe code below to use:
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http://api.soundcloud.com/tracks/100795671&color=ff6600&auto_play=false&show_artwork=false&sharing=false&download=false&show_playcount=false&liking=false&show_comments=false&auto_advance=false&show_user=false" id="player"></iframe>
</p>
<div class="ui-grid-a">
<div class="ui-block-a">
<button id="play">Play</button>
</div>
<div class="ui-block-b">
<button id="pause">Pause</button>
</div>
</div><!-- /grid-b -->
<script type="text/javascript">
var iframe = document.querySelector('#player');
var sc = SC.Widget(iframe);
sc.bind(SC.Widget.Events.READY, function () {
var d = document.createTextNode('Ready');
document.querySelector('body').appendChild(d);
});
document.querySelector('button').addEventListener('click', function () {
sc.play();
});
document.getElementById('pause').addEventListener('click', function () {
sc.pause();
});
</script>
im also calling these js files in the header
<script src="https://w.soundcloud.com/player/api.js"></script>
<script src="//connect.soundcloud.com/sdk.js"></script>
The problem i get is it won't play for me on my mobile view, the wavform image also seems to double up and cover the play/pause icon.
Screenshot:
http://imageshack.us/photo/my-images/109/qxix.png/
I've tested it on desktop view and there seems to be no issues viewing it that way, here is the page i'm testing it all on at the minute
http://www.blackburnravers.com/test/media/blackburnravers/blackburnravers_androidcore_v3.0.html
Is there out I've done wrong?
Hope somebody can help me out.
Thanks alot,
Blackburn Ravers
Unfortunately, due to implementation of the Widget API playing sound via external controls isn't possible in iOS – this is because of the asynchronous nature of postMessage and the limitation of iOS, that playback has to be initiated by user.
I have a jquery mobile page which has a panel. Inside the panel I have a listview, and on each listitem there is a where I've added a data-rel="close" attribute. I want to be able to close the panel when ever a listitem is clicked.
Note that I also has a binding to angular.
<ul data-role="listview" data-icon="arrow-l" class="ui-icon-alt" data-inset="true" >
<li ng-repeat="task in tasks" >
{{task.Name}}
</li>
</ul>
I've testes on a link outside the listview and it works fine. I'm not sure id angularjs is playing a trick on me here or it is something else.
best regards
Rasmus
Markup
{{task.Name}}
JS
$('#closepanel').on('click', function {} {
$( "#PanelID" ).panel( "close" );
});
I have a list which consists of two sections:
<ul data-role="listview" data-theme="a" data-inset="true" data-split-theme="c">
<li>
<a style="padding-top:0">
<h5>Text 1</h5>
<p><strong>Text 2</strong></p>
<p>Date: April 17, 2012</p>
<a href="http://some address" ></a>
</li>
What I would like to do is when the user clicks anywhere in the left-hand section of a row I would like to play an audio file (using the html5 tag) and for the text in this section to be removed and replaced with the audio controls for the playing audio. When the user stops the audio I'd like things to return to as they were.
I'm new to JQuery and JQueryMobile and not sure where to begin with this.
Ideally if it is possible when the audio controls appear it would be great if there could be some sort of flipping animation i.e. such as that section of the row rotates and on one side is the audio controls and on the other is the text.
Is such a thing possible?
TIA
You can nest whatever you want in your li, so you can just put two div containers in there and bind to the appropiate events and show and hide them based on that.
For example:
Markup:
<ul id="parentUL" data-role="listview" data-theme="a" data-inset="true" data-split-theme="c">
<li>
<a style="padding-top:0">
<div class="txtCnt">
<h5>Text 1</h5>
<p><strong>Text 2</strong></p>
<p>Date: April 17, 2012</p>
</div>
<div class="audioCnt displayNone">
<h1>Audio Controls</h1>
</div>
<a href="http://some address" ></a>
</li>
</ul>
JavaScript:
$('#parentUL').on('click', '.txtCnt', function () {
$(this).hide().parent().find('.audioCnt').show();
});
$('#parentUL').on('click', '.audioCnt', function () {
$(this).hide().parent().find('.txtCnt').show();
});