• You need 5 posts to download resources. You can only download 2 resources per day. To remove these limits consider upgrading.

XF How to Make Youtube Video Widget?

one_finger_man

Verified
LV
0
 
Joined
Mar 23, 2023
Messages
28
Reaction score
16
Awards
3
We are with you again with an HTML widget topic. :) Our topic this time is to show any Video uploaded to our Youtube channel as a Widget.

This process is considered quite easy compared to the HTML widget operations we shared earlier.

How To HOW TO:
1- Go to Appearance and languages -> Widget manager
area and click Add Widget button. Select the HTML option from the widget definition options and click the Add Widget button.


2- Edit the options in the field that appears similar to the following and copy the codes we copied above to the "Template" section in order

Widget ID-ID: youtube_channel
Title: Video of the Week
Show in these positions: Forum list: Sidebar (Let's Rank 60)
Advanced mode: We choose
Template:


HTML:
<div class="block" {{ widget_data($widget) }}>
        <div class="block-container">
            <h3 class="block-minorHeader">
                <a href="https://www.youtube.com/channel/UCUaLPOE7Tphhp3py5Kn0mzg?view_as=subscriber">Haftanın Videosu</a>
            </h3>
            <div class="block-body block-row">
                <iframe width="224" height="129" src="https://www.youtube.com/embed/Uei4MJDS7Os" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </div>
    </div>
</div>

Now, let's briefly explain how we need to change this code that we have added according to yourself:

1-) you need to change the a-)<a href="https://www.youtube.com/channel/UCUaLPOE7Tphhp3py5Kn0mzg?view_as=subscriber">Haftanın Videosu</a> part of the code in accordance with your youtube channel address. b-) this expression is the widget name. 2-) the ID of the video whose a-) part is shared in the code b-) The size of the video is adjusted in accordance with the sidebar.
/UCUaLPOE7Tphhp3py5Kn0mzg
>Haftanın Videosu</a>

<iframe width="224" height="129" src="
" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
/Uei4MJDS7Os"
<iframe width="224" height="129"


CSS:
.video-responsive{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.video-responsive iframe{
left:0;
ball:0;
height:100%;
width:100%;
position:absolute;
}
 
Top