ElkArte Community

Project Support => Support => Topic started by: radu81 on April 14, 2015, 05:46:29 pm

Title: embedded youtube videos
Post by: radu81 on April 14, 2015, 05:46:29 pm
This is how actually youtube videos are embedded into elkarte:

https://www.youtube.com/watch?v=M7FIvfx5J10

Is there a way to display embedded video like this?

Title: Re: embedded youtube videos
Post by: emanuele on April 14, 2015, 06:00:22 pm
In elk_jquery_embed.js:
Code: (find) [Select]
args = handler(m[2], tag, false);
Code: (replace with) [Select]
args = handler(m[2], tag, true);

FA MALEEE!!! O_O
Title: Re: embedded youtube videos
Post by: radu81 on April 14, 2015, 06:13:25 pm
Thank you! Problem solved!
Title: Re: embedded youtube videos
Post by: Spuds on April 14, 2015, 10:08:08 pm
Just realize that embedding the video from the start vs just showing a preview image does have additional overhead for the end user.  Meaning it will slow a page load, more videos on a page, the more it has to fetch to be ready.
Title: Re: embedded youtube videos
Post by: meetdilip on April 18, 2015, 08:22:56 am
Quote from: Spuds – Just realize that embedding the video from the start vs just showing a preview image does have additional overhead for the end user.  Meaning it will slow a page load, more videos on a page, the more it has to fetch to be ready.

@Spuds , can we replace the border ( not very cute in my opinion ) and replace it with a base preview image ?
Title: Re: embedded youtube videos
Post by: Spuds on April 18, 2015, 09:05:57 am
The easiest way to do that is with the custom.css file in your themes base css directory.
Code: [Select]
.elk_videoheader {
display: none;
}
.elk_video {
border: none;
}
add the above to that file and the border and header will go away.
Title: Re: embedded youtube videos
Post by: meetdilip on April 18, 2015, 03:15:21 pm
Thanks @Spuds .  Is there any specific use for that frame ?
Title: Re: embedded youtube videos
Post by: Spuds on April 18, 2015, 05:04:05 pm
No not really

The header allows to slide hide the video, that could be done other ways as well.   The "issue" is that the header is a fixed width and really should be dynamically set based on the size of the video that gets embedded.  But with a fixed width it looks pretty silly without the border around the video.
Title: Re: embedded youtube videos
Post by: radu81 on April 18, 2015, 05:04:42 pm
imo, that frame is just to advice users that there is a video, otherwise without the controls from youtube could seem a normal image embedded
Title: Re: embedded youtube videos
Post by: Spuds on April 18, 2015, 05:07:02 pm
Could probably just overlay the play icon on the image as well.
Title: Re: embedded youtube videos
Post by: inter on November 04, 2017, 12:36:27 pm
bug?

Code: [Select]
[center]https://www.youtube.com/watch?v=M7FIvfx5J10[/center]

no effect (center)
Title: Re: embedded youtube videos
Post by: Spuds on November 04, 2017, 01:18:35 pm
You can try changing the css, not sure if it will have other side effects.   So change .elk_videoheader to
Code: [Select]
.elk_videoheader {
    padding: 0 4px 0 6px;
    /* max-width: 98%; */
    /* width: 630px; */
    border: 1px solid;
}

and .elk_video to
Code: [Select]
.elk_video {
    display: block;
    max-height: 480px;
    /* width: 640px; */
    height: auto;
    border: 1px solid;
    border-top: 0;
}

probably not the effect / result you are after though.
Title: Re: embedded youtube videos
Post by: Acido on November 17, 2023, 12:52:40 pm
Sorry to necro this thread, but recently found myself having to do the same thing (alignment of embedded video) the best solution i found was to change display: block; to display: inline-block; on the elk_video containers (including videoheader) and now it works with alignment bbc.