Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • August 28, 2018 at 6:06 pm #1002770
    Guenni007

    i have some pages with images ( avia image alb elements) with manual links to youtube videos.
    in this case the default behavior would be of enfold to change for the lightbox video to the embed youtube link.

    because the mfp-iframe only appears on click i had to have a method on which the parameters are added on “status nascendi” so to speak in the moment the link was created. this is done by:
    $('body').on('DOMNodeInserted', function(){

    The goal is to add the parameters that show me as little advertising as possible from YouTube. These are especially when pausing the film and at the end of a film.

    so here is my code which goes to functions.php of my child-theme ( and it is working fine):

    function youtube_fix(){
?>
<script>
(function($){ 
	$('body').on('DOMNodeInserted', function(){
		$('iframe.mfp-iframe[src*="youtube.com"]').each(function() {
		var _src = $(this).attr("src")
		$(this).attr("src", _src +  '&cc_load_policy=1&enablejsapi=1&ecver=2&playsinline=1&rel=0&showinfo=0&color=white&iv_load_policy=3')
		});
	})
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'youtube_fix');

    but afterwards i thought i could replace those source images (from which the link goes to the iframe) with the highresolution youtube thumbnails.
    these images are correlated with the youtube video id:

    http://img.youtube.com/vi/ID/mqdefault.jpg
http://img.youtube.com/vi/ID/maxresdefault.jpg

    so i thougt it might be possible to have the ID for each link and change the source img src attribut to the correlated highres thumbnail.
    but at the moment i got no clue how to do it. There are alot of preg_matches to get the Video ID of the youtube video – but to replace the source image with the highres thumbnail on each link …no idea- yet.
    maybe you got a working solution for it.
    i go on brainstroming

    you can see here a working example of the code above – but with source images
    and you see on source code that i only inserted the normal youtube video link to the manual link of the image.
    In lightbox there is the link with all my addons – so no advertising on pause or end of video : https://webers-testseite.de/youtube-videotestseite/

    • This topic was modified 6 years, 2 months ago by Guenni007.
    September 1, 2018 at 11:15 am #1004304
    Guenni007

    so i got this code for now:
    (just for that test page-id: 33150)

    function youtube_fix(){
if (is_page(33150)){
?>
<script>
(function($){ 

		$('a.avia_image[href*="www.youtube"]').each(function() {
			regex = /(?:youtube(?:-nocookie)?\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
			var ID = $(this).attr("href").match(regex)[1];
			$(this).find('img').attr("src", 'https://img.youtube.com/vi/'+ ID +'/maxresdefault.jpg');
		});

	$('body').on('DOMNodeInserted', function(){
		$('iframe.mfp-iframe[src*="youtube.com"]').each(function() {
		var _src = $(this).attr("src")
		$(this).attr("src", _src +  '&cc_load_policy=1&enablejsapi=1&ecver=2&playsinline=1&rel=0&showinfo=0&color=white&iv_load_policy=3')
		});
	})
})(jQuery);
</script>
<?php
}
}
add_action('wp_footer', 'youtube_fix');

    but if there was no maxresdefault.jpg it should show the originally used image – how can i insert here an if else ??
    see now test-page – the one on the left got a maxres Thumbnail – the right one not –
    the 0.jpg always exists – but has black bars top/bottom
    https://webers-testseite.de/youtube-videotestseite/

    September 1, 2018 at 11:50 am #1004309
    Guenni007

    By the way: there is actually no longer a contribution to featured Requests ?

    it would be nice to have for the img alb an input field for external images.

    On Textblock element – insert media there was the “insert from url” inputfield !

    September 1, 2018 at 2:53 pm #1004379
    Dude

    Hi,
    You could use ajax to check if a preview image exists (see https://stackoverflow.com/questions/4301968/checking-a-url-in-jquery-javascript ). If yes, replace the img src (a.avia_image), otherwise don’t.

    it would be nice to have for the img alb an input field for external images.

    To be honest I’m not a big fan of this idea because we use some wordpress functions to fetch the image meta data (alt, title attributes, height, width of the image, etc.) and these functions won’t work with external images. Some users would then start to complain that no title, alt, etc. attributes are set. Also – as you pointed out – the textblock element with the “Add media” button can be used to embed external resources.

    If you’re familiar with php coding I’d recommend to create a new element based on the image element for youtube links. It would be much easier to modify the image and video urls with php, you could also use wp_remote_get ( https://codex.wordpress.org/Function_Reference/wp_remote_get ) to fetch the preview thumbnails. In addition this solution would be better for the website performance if you use a cache plugin because the user would just load static html files which already contain the right image/video urls (no injections, no ajax requests, etc.).

    By the way: there is actually no longer a contribution to featured Requests ?

    It depends on many factors but the most important one is time and/or if we’re busy or no. At the moment we’ve a backlog which does not allow us to spend time on “beyond the scope of support cases” (see https://themeforest.net/page/item_support_policy#whats-included-item-support ). If there’s a quick solution (let’s say up to 5 minutes of coding + research) we’ll help you, if it’s a “very interesting thing” which can or will be part of a future update, we’ll help you. Also if I know the answer because of a personal project, I’ll of course post it. However if I don’t have a quick answer and I don’t have time to tinker with the code I can’t help out because standard support requests and bug fixes have a higher priority than feature requests.

    Best regards,
    Dude

    September 1, 2018 at 3:58 pm #1004404
    Guenni007

    thanks for that detailed answer.

    oha – much to learn. But you should never give up – not even at an advanced age.
    I think the idea of creating a new alb element for that seems to be a good idea. But these are more academic projects than practical necessities.
    On practice it is much easier to replace in Enfold Shortcode (debug mode enabled) the image urls.
    So when i got time i will try to get familiar more with the youtube api and do the custom alb.
    Thanks again

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.