-
AuthorPosts
-
March 15, 2019 at 7:31 pm #1079216
Hey all,
I´ve embeded a Youtube video via code block onto a page on my website.
Now, I want the video to always be displayed 100% of the container width x to whatever height.What CSS do i need to add?
Cheers
RestubeMarch 15, 2019 at 8:00 pm #1079219can you give me a link to that page?
it depends on how you have placed the video.March 15, 2019 at 8:15 pm #1079221Thanks for the help Guenni007, however the page is not live yet and pw protected.
What info you need?
March 15, 2019 at 11:03 pm #1079290i would use no surrounding containers – even no color-section for it and i would use the following code block input – because it uses directly the allmost existing calculations:
do not mark any options in codeblock element.<div class="avia-video avia-video-16-9" itemprop="video" itemtype="https://schema.org/VideoObject"> <div class="avia-iframe-wrap"> <iframe …. > </iframe> </div> </div>
give a custom Class to code block element – f.e. : fullvideo
put this to your child-theme functions.php file:
function youtube_full_width(){ ?> <script> (function($){ $('.fullvideo').closest('.content').css( 'padding' , '0px' ); $('.fullvideo').closest('.container').css({ "max-width": "100%", "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');
see here: https://webers-testseite.de/youtube-shortcode-for-enfold/
password : Enfold
March 19, 2019 at 4:30 pm #1080375Hey Guenni007,
I´ve followed your instructions as explained. The result is, that now the video takes full-width not container with. Container width is set to 1200px in settings.
Also the video does not show, all i get displayed is a black box. And the section below the code block automatically adjusts to full width as well.
Is there a fix to the issues?
Cheers
DennisMarch 21, 2019 at 1:55 pm #1081386is there a link to your site?
so i misunderstood your question. You only want to have it over the container width.
The headline misleaded me: Adjust Video to browser width
same as above but without the fullvideo class
just put your codeblock into a color-sectionsee testpage again – just under the fullwidth video
March 25, 2019 at 10:09 pm #1082856Ah it`s working now!
Thanks so much for your help!! :)
March 27, 2019 at 1:28 pm #1083572 -
AuthorPosts
- The topic ‘Adjust YouTube video in Code Block to browser width’ is closed to new replies.