I'm inserting a youtube video on my website.
I customized everything I could so it wouldn't look like a youtube embed. And made it loop.
Now this weird playlist thing is appearing once the video loops.
How to remove it?
Iframe code:
<iframe width="426" height="319"
src="http://www.youtube.com/embed/hhLt3p01phg?&autoplay=1
&rel=0
&fs=0
&theme=light
&loop=1
&showinfo=0
&disablekb=1
&controls=
0&autohide=1
&playlist=hhLt3p01phg" frameborder="0" allowfullscreen></iframe>
Just for reference.
What you need is:
The video url: http://www.youtube.com/watch?v=z8GHf-aELjY
The embedded video url: http://www.youtube.com/embed/z8GHf-aELjY
Note: The above url is taken from the demonstrated website.
Now, update the iframe src attibute with to the following:
<iframe width="420" height="315"
src="https://www.youtube.com/embed/z8GHf-aELjY?rel=0&showinfo=0"
frameborder="0"
allowfullscreen>
</iframe>
Notice how I added the rel=0&showinfo=0 at the end of the src attribute of the iframe element.
From the YouTube API Documentation:
rel: This parameter indicates whether the player should show related
videos when playback of the initial video ends. Supported values are 0
and 1. The default value is 1.
And for
showinfo: Supported values are 0 and 1.
Setting the parameter's value to 0 causes the player to not display
information like the video title and uploader before the video starts
playing.
If the player is loading a playlist, and you explicitly set the
parameter value to 1, then, upon loading, the player will also display
thumbnail images for the videos in the playlist. Note that this
functionality is only supported for the AS3 player.
The demonstration can be found at this website
It' just a bug in the player. I've reported the issue to the development team, but until it's fix you could try using the chromeless player.
https://developers.google.com/youtube/flash_api_reference#GettingStarted
Related
I'm at the end of my rope with a certain issue of my videos not playing on my iPhone 6 browsers (Safari and Chrome) and certain ipads. It works great on desktop browsers, Android Chrome and even my iPad mini in Safari. I've researched this for a while now, including Stack Overflow but everything I've tried still doesn't play the video on my iPhone (only shows the initial frame image). Here is my video test page where I'm making edits, my code below and what I've tried to fix it based on research:
<section id="video-wrap">
<video class="video <?php the_field('header_video_class'); ?>" autoplay muted loop>
<source src="/video/<?php the_field('header_video'); ?>.mp4" type="video/mp4">
<source src="/video/<?php the_field('header_video'); ?>.ogg" type="video/ogg">
<source src="/video/<?php the_field('header_video'); ?>.webm" type="video/webm">
</video><!-- /video -->
<div id="video-wrapper">
<div class="video-caption">
<?php the_title(); ?>
</div><!-- /content -->
</div>
</section>
I've tried adding the controls parameter back in, no luck
I've tried adding the video source within the video tag and removing the additional source tags, no luck
I've also compressed the heck out of my video. This test example is currently 640 × 360, H.264, AAC. Still no luck.
I've tried removing the video caption overlay in case that was conflicting. No luck.
WHAT AM I MISSING? Thanks in advance for any help!
New Answer (working) :
Well I somehow missed this one little detail "only shows the initial frame image". I've misread the Question as "video does not even try to work" (because it can happen with some models/brands vs H.264 codec).
Acoording to this blog aticle : html5 Video Autoplay on iOS and Android...
Your code should look like (also use low-res MP4 version) :
<video class="video" playsinline autoplay muted loop>
Finally also check : Webkit policy for video section. Maybe it'll be useful to trick the machne.
Older Answer :
I've also compressed the heck out of my video. This test example is currently 640 × 360, H.264, AAC. Still no luck.
Your H.264 video is encoded with incompatible Profile : High # Level 3.0.
Solution : Re-encode with choosing Main # level 3.1 (also can try level 4.0).
Since no iOS hardware here, test these re-encode :
Main profile #L3.1 : clip-intro-low_v2.mp4
Baseline profile #L3.0 : clip-intro-low_v3.mp4
PS: You may have a similar issue to this Question (in case it's useful to you).
There is a trick to load a video tag in the safari browser. We simply just need to reload the page where the video tag is placed.
And to reload the page we can use this code
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('safari') != -1) {
if (ua.indexOf('chrome') > -1) {
}
else {
// Check if video tag exists
if (jQuery(document).find('.hero-slideshow .hero-media-wrap video').length > 0) {
if (window.location.href.indexOf('reload') == -1) {
window.location.replace(window.location.href + '?reload');
}
}
}
}
This might not be a permanent solution but we can use this code as quickfix.
setTimeout(function (){
$('.hero-slideshow .slides .hero-mp4 video').once().each(function(){
$(this).parent('.hero-mp4').show();
$(this).get(0).play();
});
}, 2000);
Add source to the video tag and add this attribute too.
preload="auto"
<video width="100%" height="100%" loop muted playsinline preload="auto" class="hero-video media-document mac video">
<source src="VideoSrc" type="video/mp4"></source>
</video>
Taking a look at the YouTube iFrame API, there appears to be no existing call or state that indicates whether or not a user is trying to skip to some point in a video. Ideally, in my implementation I would either like to disable YouTube controls entirely (which is apparently difficult to do from the perspective of browser-compatibility) or detect when a user is trying to skip, and return him to the point in the video before the attempt to skip was made.
Is there any good way to do this?
If you'll be disabling the controls in the iframe, try using the control = 0.
<iframe id="ytplayer" type="text/html" width="720" height="405"
src="https://www.youtube.com/embed/?controls=0&list=PLeCdlPO-XhWFzEVynMsmosfdRsIZXhZi0&listType=playlist"
frameborder="0" allowfullscreen>
For customize player control, try using this tutorial - How to Control YouTube's Video Player with JavaScript.
For example, playback control (Play and Pause):
$('#play').on('click', function () {
player.playVideo();
});
$('#pause').on('click', function () {
player.pauseVideo();
});
Hope this help.
I have used PrimeFaces for playing a youtube video from url.But there is a problem in this tag.Some of the youtube links are playing but some of them are not playing.For example;
this video is playing but this video is not playing.Here is the code;
< p : media value = "http://www.youtube.com/watch?v=mqOo7cYCBAo" width="600"
height="400"
player="flash"/>
you need to check the link. The video link which it plays has some modifications. Its not exactly the same as the one you're trying to play.
https://www.youtube.com/v/KZnUr8lcqjo
https://www.youtube.com/watch?v=mqOo7cYCBAo
Observe the strings after .com
You need to replace the string in proper format to make it play.
I'm creating dynamic WordPress "pin it" buttons and have it working on pictures.
For example, when I generate this URL it launches pinterest's pin it page:
http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.mywebsite.com%2Ftest-post%2F&media=http://www.mywebsite.com/wp-content/uploads/2012/09/picture.jpg&description=Test+Post
How do I go about doing this for a Vimeo or Youtube video?
http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.mywebsite.com%2Ftest-post%2F&media=________????_________&description=Test+Post
Do I just put a vimeo or youtube URL there?
To pin a Youtube video you just need to media link to be a youtube thumbnail. Pinterest then automatically recognizes it as a video.
To get the youtube thumbnail you need to get the video id from the youtube url as explained more here
var youtubelink = "http://www.youtube.com/embed/wkBstmXvGtk"
var youtubecode = youtubelink.match(/\/embed\/(.*)/)[1];
var pinimage = 'http://img.youtube.com/vi/' + youtubecode + '/0.jpg';
I wrote a full tutorial on it here:
http://thingsilearned.com/things/pin-button
Unfortunately, I think the script used to generate a web-based pin is not capable of handling video.
I utilized the following code...
<img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" />
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
...where the URL was the link to the YouTube video (or permalink). The problem is, the pinit.js script does not parse image information from the url or provide a video screenshot for the pin. It comes up blank, and without a value for media, the script won't create the pin.
To confirm the problem is within pinit.js, I substituted that script for pinmarklet.js. What that script does is create an overlay on the page, with the screen shot of a video and a "PIN IT" button overlay on the screen shot. But that's probably not the type of user experience you're looking to present.
One possible option (and you could get away with this through feeding the URL, media and description values dynamically) is to feed the URL with the video URL, create a screenshot and feed that into media, and finally, add the description. The drawback to this is, you'll only be pinning the image and not the video directly.
Sorry to be the bearer of bad news.
I am using backbone.js to replace content on a page. After backbone places the new content I call a JW Player script to create a video (Flash normal web, HTML5 video tag on iOS).
When I play one video, stop that video, use backbone to replace the video, click to play the new video... the new video just has a spinner and won't play. (this only happens in iOS devices)
Has anyone had this issue that knows what might be happening and how to fix it?
This content is getting updated via backbone.
<div class="media-wrapper">
<div class="media-holder"><div id="media"></div></div>
</div>
This function is being called after backbone and creates the video on the div above.
function create_video(url,w,h,thumb)
{
jwplayer('media').setup({
flashplayer: '/api/js/jwp/player.swf',
skin: '/api/js/jwp/video.zip',
wmode: 'opaque',
image: thumb,
file: url,
height: h,
width: w
});
}
I am pretty sure it is not JW Player, but something to do with iOS and how it handles html5 videos.
This is a known bug[1] with using the same div and calling setup multiple times. The forum post linked to from the bug has the simple workaround of incrementing your div id each time you call setup.
[1] http://developer.longtailvideo.com/trac/ticket/1615