-
AuthorPosts
-
September 18, 2018 at 7:19 am #1011117
Hi there,
we are using enfold and the slide-show with youtube video. The Background is black and we would like to change the Color. but where?
Thanks for your helpSeptember 18, 2018 at 10:18 am #1011179Hey werbeagenturlauf,
Could you post a link to the page in question so that we can take a closer look please?
Best regards,
RikardSeptember 18, 2018 at 12:35 pm #1011228September 18, 2018 at 8:27 pm #1011492Hi,
You are seeing black pillar boxing on the sides of the video because the aspect ratio of the player differs from that of the video.
The black you are seeing is from youtube.
If you were able to upload the video as a different ratio you would not have the pillar boxing, but I don’t believe that is a option with youtube. I also looked into changing the color but I didn’t find that solution. Try looking in your youtube author panel to see if they have added a new option to do so.Best regards,
MikeSeptember 18, 2018 at 11:45 pm #1011565@Mike : seems to be all 16/9 videos – must be something different .
________
and by the way – why did you do it this way? ( via slider)
you can combine all your videos in one youtube playlist – without generating a playlist on youtube. ( this will be the best way – because i think the transitions between those videos are gone).this could be for your videos an iframe code:
<iframe src="https://www.youtube-nocookie.com/embed/sATEt-81AT8?enablejsapi=1&ecver=2&controls=0&cc_load_policy=1&rel=0&showinfo=0&autoplay=1&color=white&iv_load_policy=3&loop=1&playlist=QU0MCwH9cIU,f7Oy2fySTHM,DWRUW1oSLxI,JGt8g7Ms0zA,PGrBLAci8tQ,SlEXdbUgMuQ,kjA-GLzPMfQ,X-qPTwLUBAM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
you see the first video is single – and at the end there are comma separated the other VideoIDs.
now to your setup to get a responsive youtube setup:
click to enlarge:
put this into your page on top in a code-block element and give to the code-block element a custom-class: fullvideo
<div class="avia-video avia-video-16-9" itemprop="video" itemtype="https://schema.org/VideoObject"> <div class="avia-iframe-wrap"> <iframe src="https://www.youtube-nocookie.com/embed/sATEt-81AT8?enablejsapi=1&ecver=2&controls=0&cc_load_policy=1&rel=0&showinfo=0&autoplay=1&color=white&iv_load_policy=3&loop=1&playlist=QU0MCwH9cIU,f7Oy2fySTHM,DWRUW1oSLxI,JGt8g7Ms0zA,PGrBLAci8tQ,SlEXdbUgMuQ,kjA-GLzPMfQ,X-qPTwLUBAM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div> </div>
go to your functions.php of your child-theme and insert:
function youtube_full_width_with_shortcode(){ ?> <script> (function($){ $('.fullvideo').closest('.content').css( 'padding' , '0px' ); $('.fullvideo').closest('.container').css({"max-width": "100%", "padding": "0" }); $('.fullvideo .avia-video').css('margin-bottom', '0px' ); $('.fullvideo .avia-iframe-wrap').css('margin-bottom', '0px' ); })(jQuery); </script> <?php } add_action('wp_footer', 'youtube_full_width_with_shortcode');
see Result: https://webers-testseite.de/youtube-playlist-embed/
September 19, 2018 at 12:40 am #1011574Hi,
@Guenni007 great work, this is far better. Thanks for sharing.Best regards,
MikeSeptember 19, 2018 at 6:59 am #1011626Hi Guenni,
hey thanks for this input! i tried to paste the code into functions.php in the childtheme but i get an error:
I pasted it now per FTP, that worked, but the result is different to yours:
I can`t give to the code-block element a custom-class: fullvideo
- This reply was modified 6 years, 2 months ago by werbeagenturlauf.
September 19, 2018 at 8:21 am #1011654There is on your Enfold Settings / Layout Builder : Show element options for developers
Then you will have the new input field on most of the ALB Elements .By the way : the code is tested and works on my functions.php ( child-theme )
September 19, 2018 at 9:02 am #1011661Perfect!!!
Developer Option solved all!
Thanks to you !September 19, 2018 at 9:34 am #1011683Hi,
Great, glad you got it working :-) Thanks to @guenni007 for helping out.
Please let us know if you should need any further help on the topic or if we can close it.
Best regards,
RikardSeptember 19, 2018 at 9:54 am #1011700if you like to have the controls you can delete this parameter from the code-block element code
&controls=0
maybe instead add the
&playsinline=1
parameter – this is for the ipad / iphone background option.October 10, 2018 at 7:03 am #1019811Hi Guenni007!
Thank a lot for your assistence to the code. Now i am working on the responisve side of the website an get this “error” for the frontpage video:
Would you please take a look. We need the video for tablet and smartphoneThanks a lot
Michael F. KrausOctober 11, 2018 at 10:06 pm #1020492Hi,
The problem is that the format of the video is not working on those devices, you should upload a different format :)
Best regards,
Basilis -
AuthorPosts
- You must be logged in to reply to this topic.