Modify iframe to be dynamic

app.py

@@ -15,9 +15,9 @@ from nltk import word_tokenize
 from nltk.stem import WordNetLemmatizer
 from collections import defaultdict
 
-nltk.download('punkt')
-nltk.download('averaged_perceptron_tagger')
-nltk.download('wordnet')
+# nltk.download('punkt')
+# nltk.download('averaged_perceptron_tagger')
+# nltk.download('wordnet')
 
 """## Transcript Summary Module"""
 
@@ -223,7 +223,7 @@ def summarize_text(url, percent):
           break
 
   yt = YouTube(url)
-  video_html = f'<iframe width="560" height="315" src="{yt.embed_url}" frameborder="0" allowfullscreen></iframe>'
+  video_html = f'<div id="video-container" style="position: relative; width: 100%; padding-bottom: 56.25%;"><iframe id="video" style="position: absolute; width: 100%; height: 100%;" src="{yt.embed_url}" frameborder="0" allowfullscreen></iframe></div>'
 
   return summary, video_html
 
@@ -274,6 +274,7 @@ theme = gr.themes.Soft(
     block_label_background_fill_dark='*body_background_fill',
 )
 
+
 with gr.Blocks(theme=theme) as demo:
 
   gr.Markdown(
@@ -299,7 +300,7 @@ with gr.Blocks(theme=theme) as demo:
     with gr.Column():
       summary_output = gr.Textbox(label="Summary", show_copy_button=True)
       tts_btn = gr.Button(variant="primary", value="Text-to-Speech")
-      summary_tts = gr.Audio(label="Text-to-Speech", interactive=False)
+      summary_tts = gr.Audio(label="Audio", interactive=False)
 
     # Buttons
     summarize_btn.click(summarize_text, inputs=[url_input, slider], outputs=[summary_output, video_preview])