Spent a better part of yesterday 6/12/2017 trying figure out why my captioning was not working when I was using the YouTube iframe embed code (generated from the Share > Embed button).
After much experimentation, I narrowed the problem down to what has already been identified. Closed captioning was not working as the captioning was automatically generated. Once I manually created the closed captioning, everything seemed to work fine. I didn't even have to use the cc_load_policy=1 parameter.
BUT... Today 6/13/2017, I happened to be working with the same video files and all of a sudden I got different behavior. When I play the video from a regular YouTube page, I see the captioning. When I play the video from the iframe embedded players I do not. Tried all sorts of goofy things to get things to work based on reading.
recreated the english closed caption (manually created a blurb at beginning).
set the cc_load_policy=1 parameter
set yt:cc=on as a tag
some other goofy things that are not worth mentioning.
CAPTIONING
note: In both cases the domain was: http://www.youtube.com I could only include 2 links in post.
/watch?v=EExO_6PVIXk
NO CAPTIONING:
/embed/EExO_6PVIXk
/embed/EExO_6PVIXk?cc_load_policy=1
I am at a loss. Any direction would be appreciated.
John
Heard through the grapevine that something changed with the YouTube iFrame API yesterday (6/14/17) where CC started to work.
With some testing, I got mixed results (but am working):
1) As of now (6/15/17), the embed video links now show the CC button and will show CC if you had previously enabled closed captioning (kept track in local storage under "yt-html5-player-modules::subtitlesModuleData::module-enabled".
2) If you provide documented the "cc_load_policy=1" parameter to the URL (of the iFrame embed) closed captioning will show regardless of the value in local storage.
3) What didn't work is me loading the iframe as follows:
<iframe
id="futusign_youtube"
style="visibility: hidden;"
frameborder="0"
src="https://www.youtube.com/embed/XIMLoLxmTDw?enablejsapi=1"
></iframe>
and then trying to set the CC policy in playerVars:
var player = new window.YT.Player('futusign_youtube', {
playerVars: {
'controls': 0,
'enablejsapi': 1,
'showinfo': 0,
'rel': 0,
'cc_load_policy': 1,
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange,
'onError': onPlayerError,
}
});
4) The work-around is to set the cc_load_policy=1 on the URL of the src to the iFrame.
<iframe
id="futusign_youtube"
style="visibility: hidden;"
frameborder="0"
src="https://www.youtube.com/embed/XIMLoLxmTDw?enablejsapi=1&cc_load_policy=1"
></iframe>
I think this might be a duplicate of this problem:
Embed Youtube with Captions on by default not working
...where adding the cc_lang_pref=en option (if you want English) solves the problem.
Related
I'm working on some websites that are using the WPBakery video background on rows. These should autoplay, and did until recently. Sometimes they do, and sometimes they don't. Typically it happens where they don't work more when I'm looking at them via Incognito mode on Chrome. I'm aware of the changes a couple years ago for autoplaying needing to include muted, and I've tried to hack this to add muted to the allow, but because it comes in via an iframe, it adds it too late for the autoplay to start.
Example Sites:
https://www.infrastructurereportcard.org/
https://brgcommunications.com/
https://colorworksinc.com/
I haven't seen other questions on this, but the fact that I'm seeing it on three totally different sites means that it is likely a larger issue.
Below is a bit of code that I tried, but wasn't successful in getting it to actually autoplay. It gave me an error of .play() is not a function.
<script type="text/javascript">
jQuery(function($) {
$(window).load(function(){
$('#widget2').attr('allow', 'muted accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture');
$('#widget2').play();
});
});
</script>
I think there's two parts of the WPBakery plugin's video background not working properly.
Video's with a Youtube-embed link are not working properly.
Video's stop autoplaying when using the same URL.
The first one is fixable by only using the URL's without embed. Something like: https://www.youtube.com/watch?v=XXXXXXXXX
The second one is fixable by creating a unique URL every time you load the page. This can be done by the following code:
function startVideo() {
const date = $('.video-wrapper').data('date');
let src = $('.video-wrapper iframe').attr('src');
src = src + '&autoplay=1&randomVar=' + date;
$('.video-wrapper iframe').attr('src', src);
}
This will take the existing url of the iframe, add the current date which is available on the wrapper and regenerate the video's url. This way the URL is always unique and will autoplay. You can also just generate a date manually and add that as a random param on the URL.
Hope this is of any help!
OK I'm trying to develop a website that includes a youtube playlist. Later it should be possible for every person (in my local network) who visits the website to add songs to this playlist. I will use the youtube-api and probable php or python for this.
Now I've included the playlist via an <iframe> tag and stumbled across a big problem. If I now add more songs to this playlist (over youtube itself), they will of course only be added to the playlist on my website, when I reload the complete website. And if I just reload the div with the <iframe> for example, the problem is that the playlist starts all over again at the first song.
Is there a way I can dynamically update the playlist on my website? So that the playlist does not start again from the beginning, the current playing remains and new added songs are actually added "live" to the playlist?
Here the <iframe> tag if it helps:
<iframe id="playlist" src="https://www.youtube.com/embed/videoseries?list=PLmdXGEzOwfzb0fq7S2iP-t4i7x19R1ZN2"
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
A way I suggest is:
(Before updating the div which contains the iframe), you need to get both the current playing video and the current time of the playing video.1
(Once you had added the video to the playlist and get the values I mentioned in the previous lines), update the div element (by modifying the src value of your iframe).
A example could be like this:
You have a playlist which id is: PLmdXGEzOwfzb0fq7S2iP-t4i7x19R1ZN2.
The current playing video is: 51iquRYKPbs
When you right-click on the playing video 51iquRYKPbs you'll get the Copy URL video at current time option.
Once selected the Copy URL video at current time option, you'lll get a URL like this:
youtu.be/51iquRYKPbs?list=PLmdXGEzOwfzb0fq7S2iP-t4i7x19R1ZN2&t=80
Check the highlighted values - you'll need them for reload your iframe.
Your current iframe src value is as follows:
https://www.youtube.com/embed/videoseries?list=PLmdXGEzOwfzb0fq7S2iP-t4i7x19R1ZN2
(No modifications yet).
For reload the iframe with the applied changes, set your iframe src as follows:
https://www.youtube.com/embed/51iquRYKPbs?list=PLZCHH_4VqpRhMW1K9I1hbgBRmmlWdyK3k&autoplay=1&start=80
(Once you change the src value of your iframe, it will reload with the changes made and it will continue playing the video in the specified time).
The changes made to the src value are explained next:
Set the videoId value of the video which was playing (before complete the reload).
Set the start value of the video for continue playing at the specified time.
the autoplay=1 is needed for play the video at the specified time.
1 About how get the current playing video and the current time of the playing video is a complete new question and it will depend in which language you're handling all the YouTube stuff in your website - (since you mentioned in your question that you will use php or python).
When I set the config to the iframe with the new player version, it doesn't work.
I'm setting the config on this way on the iframe URL:
<iframe src="{{url}}?controls=0&playsinline=1&autoplay=0&showinfo=0&rel=0&modestbranding=0&enablejsapi=1&widgetid=1" ... />
This is the gist of the debug info of the player
Anyone have a clue about this? I really appreciate any help.
This seems to have been fixed. After clearing the browser data both the player on my site and the Youtube Player Demo are working as expected. When setting rel=0 and showinfo=0 for the url in the iframe, the title and the related videos disappear.
Just an update in case you experience any new behaviour with the mentioned parameters.
According to: https://developers.google.com/youtube/player_parameters#release_notes_08_23_2018
showInfo is now deprecated & the default behaviour of rel has changed so 0 no longer disables videos instead it shows additional videos from the same channel.
I slightly extended the discovermeteor tutorial and added an image to every post in post_item.html:
<img src="discover.png" height="40px" />
After putting discover.png in the public folder everything seems to work as expected. However if you open the detail page (click on 'discuss') and come back to the overview (click on 'microscope' in the header) the pictures or not loading anymore. It happens in Safari and Firefox, in Chrome it's still working as expected. I put the example on http://img-notloading-safari.meteor.com
I don't know if this has something to do with it, but I noticed, the 'waitOn' function of iron:router is called twice when the overview is loaded in the beginning, but only once when I come back form the detail view and the pictures are not loading.
Any hint would be highly appreciated.
I looked at network requests in Firefox and for some reason it tries to load http://img-notloading-safari.meteor.com/posts/discover.png, which is not there. Maybe this happens because the template is rendered before the url changes.
I suggest you changing the url of the image in <img src= from discover.png, which is a relative url, to a /discover.png, that is, to absolute path.
I am customizing my tumblr template and I need to access the URL of the iframe that contains my photoset. When I look at the html of my tumbler page, I see:
<figure class="photoset with-caption">
<div id="photoset_66130132457" class="html_photoset">
<iframe id="photoset_iframe_66130132457" class="photoset" style="border:0px; background-color:transparent; overflow:hidden;" src="http://blog.kazoova.com/post/66130132457/photoset_iframe/kazoova/tumblr_mvtbtjxyAt1t05bsz/0/false" frameborder="0" height="535" scrolling="no" width="100%">
</iframe>
</div>
</figure>
How do I get the value of src in the iframe using tumblr variables?
I can get the URLs of individual images using the following code, but this is not what I am looking for:
{block:Photoset}
{block:Photos}
{PhotoURL-500}
{/block:Photos}
{/block:Photoset}
I am hoping there is a variable for photoset that is similar to {PhotoURL-500} like {PhotosetURL-500}.
Please help!
How to get a Photosets iframe src
Sadly, there isn't a theme operator that gives us the src as a string, the only option we have is to use {Photoset-500} as OP states. However, it is possible to work the iframe src out with the theme operators we have.
Breakdown of the iframe src
http://mikedidthis-pierre.tumblr.com/post/37187983482/photoset_iframe/mikedidthis-pierre/tumblr_meih4y5SDi1rkq61e/700/false
We can break this down into 7 parts:
http://mikedidthis-pierre.tumblr.com/post/
37187983482/
photoset_iframe/
mikedidthis-pierre/
tumblr_meih4y5SDi1rkq61e/
700/
/false
1 The URL of the Tumblr blog, prefixed with post/. 1 and 2 should be used in tandum.
2 Unique Post ID.
3 A generic, consistant sub directory.
4 At first glance looks like the Tumblr username. I wouldn't say its the Tumblr URL due to custom domains. However, it seems like it can be changed to anything, as long at it contains a character.
5 A unique Tumblr generated ID. Think reblog keys. This is the part we really need and there are no theme operators to generate this.
6 The size, in width of the iframe.
7 Shadow mode. I believe turning this to true adds drop shadows to each of the photos in a photoset.
How much of this can we replicate?
So using the available theme operators like so:
{BlogURL}/post/{PostID}/photoset_iframe/x/ * missing 5 * /700/false
We can almost generate the full src!
http://mikedidthis-pierre.tumblr.com/post/37187983482/photoset_iframe/x/ * missing 5 * /700/false
Finding 5
The bad news is, we are going to need javascript. I am not going to cover that, but I will explain how we can get the missing information. If you use the theme operators for a photoset, that just give use the image urls `{PhotoURL-500}:
http://25.media.tumblr.com/tumblr_meih4y5SDi1rkq61eo4_500.jpg
Can you see 5? Lets break it down:
http://25.media.tumblr.com/
tumblr_meih4y5SDi1rkq61e
o4
_500
.jpg
1 Address for the Tumblr server the image is hosted on.
2 The missing data 5.
3 This is the number of the image in the photoset, so 4th. However, I think this relates to upload order, rather than display order.
4 Size of the image.
5 File extension.
So now what?
So to get the complete iframe src, you are going to need to use javscript to find the data for part 5 and then combining that with the data we already have from the available theme operators.
OP hasn't stated why they need the iframe URL. I would presume for delaying the loading, maybe to do with responsive.
Hope it helps!
Proof of concept:
Image based Photoset: Example.
Iframe based Photoset using information from above: Example.
I had a similar issue - I wanted to link the photoset "captions" (headers the way we have it set up) so that all of the post headers were links and worked/looked the same.
I found #mikedidthis's answer helpful. But I played around with it a bit and I thought reconstruction the iframe src from scratch was overkill.
I went about it updating my markup with a few more classes and using the following Javascript -
$('.top.media.photoset.no-link').each(function(){
$set = $(this);
var url = $set.find('iframe').attr('src');
// console.log(url);
$set.find('.cont').find('a').attr('href',url).end().end().removeClass('no-link');
});
Since I have lazy loading on, I wanted a way to only set the href once per link, I added in the class no-link to use for selector specificity (I could have also searched for links where href != "#" as well I suppose).